<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li class="active"><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. 什么是面向对象">1. 什么是面向对象</a><ul><li><a href="#t11.1 概念">1.1 概念</a></li><li><a href="#t21.2 继承">1.2 继承</a></li><li><a href="#t31.3 封装">1.3 封装</a></li><li><a href="#t41.4 多态">1.4 多态</a></li></ul></li><li><a href="#t52. 设计原则">2. 设计原则</a><ul><li><a href="#t62.1 什么是设计？">2.1 什么是设计？</a></li></ul></li><li><a href="#t72.2 SOLID五大设计原则">2.2 SOLID五大设计原则</a><ul><li><a href="#t82.2.1 S 单一职责原则">2.2.1 S 单一职责原则</a></li><li><a href="#t92.2.2 O 开放封闭原则">2.2.2 O 开放封闭原则</a></li><li><a href="#t102.2.3 L 里氏替换原则">2.2.3 L 里氏替换原则</a></li><li><a href="#t112.2.4  I 接口隔离原则">2.2.4  I 接口隔离原则</a></li><li><a href="#t122.2.5 D 依赖倒置原则">2.2.5 D 依赖倒置原则</a></li></ul></li><li><a href="#t133. 23种设计模式">3. 23种设计模式</a><ul><li><a href="#t143.1 创建型">3.1 创建型</a></li><li><a href="#t153.2 结构型模式">3.2 结构型模式</a></li><li><a href="#t163.3 行为型">3.3 行为型</a></li></ul></li><li><a href="#t174. 工厂模式">4. 工厂模式</a><ul><li><a href="#t184.1 简单工厂模式">4.1 简单工厂模式</a><ul><li><a href="#t194.1.1 类图">4.1.1 类图</a></li><li><a href="#t204.1.2 代码">4.1.2 代码</a></li><li><a href="#t214.1.3 经典场景">4.1.3 经典场景</a><ul><li><a href="#t224.1.3.1 jQuery">4.1.3.1 jQuery</a></li><li><a href="#t234.1.3.2 React">4.1.3.2 React</a></li></ul></li></ul></li><li><a href="#t244.2 工厂方法模式">4.2 工厂方法模式</a><ul><li><a href="#t254.2.1 类图">4.2.1 类图</a></li><li><a href="#t264.2.2 代码">4.2.2 代码</a></li></ul></li><li><a href="#t274.3 抽象工厂模式">4.3 抽象工厂模式</a><ul><li><a href="#t284.3.1 类图">4.3.1 类图</a></li><li><a href="#t294.3.2 代码">4.3.2 代码</a></li></ul></li></ul></li><li><a href="#t305.单例模式">5.单例模式</a><ul><li><a href="#t315.1 类图">5.1 类图</a></li><li><a href="#t325.2 代码">5.2 代码</a><ul><li><a href="#t335.2.1 typescript">5.2.1 typescript</a></li><li><a href="#t345.2.2 ES5单例模式">5.2.2 ES5单例模式</a></li><li><a href="#t355.2.3 透明单例">5.2.3 透明单例</a></li><li><a href="#t365.2.4 单例与构建分离">5.2.4 单例与构建分离</a></li><li><a href="#t375.2.5 封装变化">5.2.5 封装变化</a></li><li><a href="#t385.2.6 命名空间">5.2.6 命名空间</a></li></ul></li><li><a href="#t395.3 场景">5.3 场景</a><ul><li><a href="#t405.3.1 jQuery">5.3.1 jQuery</a></li><li><a href="#t415.3.2 模态窗口">5.3.2 模态窗口</a></li><li><a href="#t425.3.3 store">5.3.3 store</a></li><li><a href="#t435.3.4 缓存">5.3.4 缓存</a></li><li><a href="#t445.3.5 LRU缓存">5.3.5 LRU缓存</a></li></ul></li></ul></li><li><a href="#t456. 适配器模式">6. 适配器模式</a><ul><li><a href="#t466.1 类图">6.1 类图</a></li><li><a href="#t476.2 代码">6.2 代码</a></li><li><a href="#t486.3 场景">6.3 场景</a><ul><li><a href="#t496.3.1 插件适配">6.3.1 插件适配</a></li><li><a href="#t506.3.1 promisify">6.3.1 promisify</a></li><li><a href="#t516.3.2 jquery">6.3.2 jquery</a></li><li><a href="#t526.3.3 computed">6.3.3 computed</a></li></ul></li></ul></li><li><a href="#t537.装饰器模式">7.装饰器模式</a><ul><li><a href="#t547.1 类图">7.1 类图</a></li><li><a href="#t557.2 代码">7.2 代码</a></li><li><a href="#t567.3 包装器">7.3 包装器</a></li><li><a href="#t577.4 AOP">7.4 AOP</a></li><li><a href="#t587.3 场景">7.3 场景</a><ul><li><a href="#t597.3.1 埋点">7.3.1 埋点</a></li><li><a href="#t607.3.2 表单校验">7.3.2 表单校验</a></li><li><a href="#t617.3.3 防CSRF攻击">7.3.3 防CSRF攻击</a><ul><li><a href="#t627.3.3.1 受信任网站">7.3.3.1 受信任网站</a></li><li><a href="#t637.3.3.2 login">7.3.3.2 login</a></li><li><a href="#t647.3.3.3 取款">7.3.3.3 取款</a></li><li><a href="#t657.3.3.4 非信任网站">7.3.3.4 非信任网站</a></li><li><a href="#t667.3.3.5 csrf">7.3.3.5 csrf</a></li><li><a href="#t677.3.3.6 form">7.3.3.6 form</a></li></ul></li><li><a href="#t687.3.4 支持decorators">7.3.4 支持decorators</a></li><li><a href="#t697.3.5 类decorators">7.3.5 类decorators</a></li><li><a href="#t707.3.6 方法decorators">7.3.6 方法decorators</a></li></ul></li></ul></li><li><a href="#t718.代理模式">8.代理模式</a><ul><li><a href="#t728.1 类图">8.1 类图</a></li><li><a href="#t738.2 代码">8.2 代码</a></li><li><a href="#t748.3 场景">8.3 场景</a><ul><li><a href="#t758.3.1 事件委托">8.3.1 事件委托</a></li><li><a href="#t768.3.2 图片懒加载">8.3.2 图片懒加载</a><ul><li><a href="#t778.3.2.1 app.js">8.3.2.1 app.js</a></li><li><a href="#t788.3.2.2 index.html">8.3.2.2 index.html</a></li></ul></li><li><a href="#t798.3.3 防抖代理">8.3.3 防抖代理</a><ul><li><a href="#t808.3.3.1 todo.html">8.3.3.1 todo.html</a></li><li><a href="#t818.3.3.2 todos.html">8.3.3.2 todos.html</a></li><li><a href="#t828.3.3.3 app.js">8.3.3.3 app.js</a></li><li><a href="#t838.3.3.4 app.js">8.3.3.4 app.js</a></li></ul></li><li><a href="#t848.3.4 代理跨域">8.3.4 代理跨域</a><ul><li><a href="#t858.3.4.1 3000.js">8.3.4.1 3000.js</a></li><li><a href="#t868.3.4.2 4000.js">8.3.4.2 4000.js</a></li><li><a href="#t878.3.4.3 index.html">8.3.4.3 index.html</a></li><li><a href="#t888.3.4.4 target.html">8.3.4.4 target.html</a></li></ul></li><li><a href="#t898.3.5 代理缓存">8.3.5 代理缓存</a></li><li><a href="#t908.3.5 $.proxy">8.3.5 $.proxy</a></li><li><a href="#t918.3.6 Proxy">8.3.6 Proxy</a></li></ul></li></ul></li><li><a href="#t929. 外观模式">9. 外观模式</a><ul><li><a href="#t939.1 类图">9.1 类图</a></li><li><a href="#t949.2 代码">9.2 代码</a></li><li><a href="#t959.3 代码">9.3 代码</a></li><li><a href="#t969.3 场景">9.3 场景</a><ul><li><a href="#t979.3.1 redux">9.3.1 redux</a></li></ul></li></ul></li><li><a href="#t9810.观察者模式">10.观察者模式</a><ul><li><a href="#t9910.1 类图">10.1 类图</a></li><li><a href="#t10010.2 代码">10.2 代码</a></li><li><a href="#t10110.3 场景">10.3 场景</a><ul><li><a href="#t10210.3.1 事件绑定">10.3.1 事件绑定</a></li><li><a href="#t10310.3.2 Promise">10.3.2 Promise</a></li><li><a href="#t10410.3.3 callbacks">10.3.3 callbacks</a></li><li><a href="#t10510.3.4 events">10.3.4 events</a></li><li><a href="#t10610.3.5 流">10.3.5 流</a></li><li><a href="#t10710.3.6 http服务器">10.3.6 http服务器</a></li><li><a href="#t10810.3.7 生命周期函数">10.3.7 生命周期函数</a></li><li><a href="#t10910.3.8 vue watch">10.3.8 vue watch</a></li><li><a href="#t11010.3.9 redux">10.3.9 redux</a></li></ul></li></ul></li><li><a href="#t11111. 迭代器模式">11. 迭代器模式</a><ul><li><a href="#t11211.1 类图">11.1 类图</a></li><li><a href="#t11311.2 代码">11.2 代码</a></li><li><a href="#t11411.3 场景">11.3 场景</a><ul><li><a href="#t11511.3.1 Iterator">11.3.1 Iterator</a></li><li><a href="#t11611.3.2 ...">11.3.2 ...</a></li><li><a href="#t11711.3.3 yield*">11.3.3 yield*</a></li></ul></li><li><a href="#t11812. 状态模式">12. 状态模式</a></li><li><a href="#t11912.1 类图">12.1 类图</a></li><li><a href="#t12012.2 代码">12.2 代码</a></li><li><a href="#t12112.3 应用场景">12.3 应用场景</a><ul><li><a href="#t12212.3.1 点赞">12.3.1 点赞</a></li><li><a href="#t12312.3.2 promise">12.3.2 promise</a></li><li><a href="#t12412.3.3  React导航">12.3.3  React导航</a></li><li><a href="#t12512.3.4 有限状态机">12.3.4 有限状态机</a></li></ul></li></ul></li><li><a href="#t12613.策略模式">13.策略模式</a><ul><li><a href="#t12713.1 类图">13.1 类图</a></li><li><a href="#t12813.2 代码">13.2 代码</a></li><li><a href="#t12913.3 应用场景">13.3 应用场景</a><ul><li><a href="#t13013.3.1 animate">13.3.1 animate</a></li><li><a href="#t13113.3.2 表单校验">13.3.2 表单校验</a></li></ul></li></ul></li><li><a href="#t13214. 原型模式">14. 原型模式</a><ul><li><a href="#t13314.1 类图">14.1 类图</a></li><li><a href="#t13414.2 代码">14.2 代码</a></li><li><a href="#t13514.3 JavaScript中的原型">14.3 JavaScript中的原型</a><ul><li><a href="#t13614.3.1 函数和对象">14.3.1 函数和对象</a></li><li><a href="#t13714.3.2 prototype">14.3.2 prototype</a></li><li><a href="#t13814.3.3 instanceof">14.3.3 instanceof</a></li><li><a href="#t13914.3.4 原型链">14.3.4 原型链</a></li><li><a href="#t14014.3.5 原型优势">14.3.5 原型优势</a></li></ul></li><li><a href="#t14114.4 场景">14.4 场景</a></li></ul></li><li><a href="#t14215. 桥接模式">15. 桥接模式</a><ul><li><a href="#t14315.1 类图">15.1 类图</a></li><li><a href="#t14415.2 代码">15.2 代码</a></li><li><a href="#t14515.3 应用场景">15.3 应用场景</a><ul><li><a href="#t14615.3.1 事件监听">15.3.1 事件监听</a></li><li><a href="#t14715.3.2 分离变化">15.3.2 分离变化</a></li></ul></li></ul></li><li><a href="#t14816. 组合模式">16. 组合模式</a><ul><li><a href="#t14916.1 类图">16.1 类图</a></li><li><a href="#t15016.2 代码">16.2 代码</a></li><li><a href="#t15116.3 应用场景">16.3 应用场景</a><ul><li><a href="#t15216.3.1 文件夹和文件">16.3.1 文件夹和文件</a></li><li><a href="#t15316.3.2 绘制表单">16.3.2 绘制表单</a></li></ul></li></ul></li><li><a href="#t15417. 命令模式">17. 命令模式</a><ul><li><a href="#t15517.1 类图">17.1 类图</a></li><li><a href="#t15617.2 代码">17.2 代码</a></li><li><a href="#t15717.3 应用场景">17.3 应用场景</a><ul><li><a href="#t15817.3.1 计数器">17.3.1 计数器</a></li><li><a href="#t15917.3.2 撤销和重做">17.3.2 撤销和重做</a></li><li><a href="#t16017.3.3 多步撤销和重做">17.3.3 多步撤销和重做</a></li></ul></li></ul></li><li><a href="#t16118. 享元模式">18. 享元模式</a><ul><li><a href="#t16218.1 类图">18.1 类图</a></li><li><a href="#t16318.2 代码">18.2 代码</a></li><li><a href="#t16418.3 场景">18.3 场景</a><ul><li><a href="#t16518.3.1 对象">18.3.1 对象</a></li><li><a href="#t16618.3.2 分页">18.3.2 分页</a></li></ul></li></ul></li><li><a href="#t16719. 模版方法">19. 模版方法</a><ul><li><a href="#t16819.1 类图">19.1 类图</a></li><li><a href="#t16919.2 代码">19.2 代码</a></li><li><a href="#t17019.3 场景">19.3 场景</a><ul><li><a href="#t17119.3.1 提示框">19.3.1 提示框</a></li><li><a href="#t17219.3.2">19.3.2</a></li></ul></li></ul></li><li><a href="#t17320. 职责链模式">20. 职责链模式</a><ul><li><a href="#t17420.1 类图">20.1 类图</a></li><li><a href="#t17520.2 代码">20.2 代码</a></li></ul></li><li><a href="#t17621. 备忘录模式">21. 备忘录模式</a><ul><li><a href="#t17721.1 类图">21.1 类图</a></li><li><a href="#t17821.2 代码">21.2 代码</a></li></ul></li><li><a href="#t17922. 中介者模式">22. 中介者模式</a><ul><li><a href="#t18022.1 类库">22.1 类库</a></li><li><a href="#t18122.2 代码">22.2 代码</a></li></ul></li><li><a href="#t18223. 访问者模式">23. 访问者模式</a><ul><li><a href="#t18323.1 组成部分">23.1 组成部分</a></li><li><a href="#t18423.2 类图">23.2 类图</a></li><li><a href="#t18523.3 代码">23.3 代码</a></li><li><a href="#t18623.3 应用场景">23.3 应用场景</a></li></ul></li><li><a href="#t18724. 解释器模式">24. 解释器模式</a><ul><li><a href="#t18824.1 类图">24.1 类图</a></li><li><a href="#t18924.2 代码">24.2 代码</a></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. &#x4EC0;&#x4E48;&#x662F;&#x9762;&#x5411;&#x5BF9;&#x8C61;">1. &#x4EC0;&#x4E48;&#x662F;&#x9762;&#x5411;&#x5BF9;&#x8C61; <a href="#t01. &#x4EC0;&#x4E48;&#x662F;&#x9762;&#x5411;&#x5BF9;&#x8C61;"> # </a></h2>
<ul>
<li>&#x628A;&#x5BA2;&#x89C2;&#x5BF9;&#x8C61;&#x62BD;&#x8C61;&#x6210;&#x5C5E;&#x6027;&#x6570;&#x636E;&#x548C;&#x5BF9;&#x6570;&#x636E;&#x7684;&#x76F8;&#x5173;&#x64CD;&#x4F5C;&#xFF0C;&#x628A;&#x5185;&#x90E8;&#x7EC6;&#x8282;&#x548C;&#x4E0D;&#x60F3;&#x5173;&#x7684;&#x4FE1;&#x606F;&#x9690;&#x85CF;&#x8D77;&#x6765;&#xFF0C;&#x628A;&#x540C;&#x4E00;&#x4E2A;&#x7C7B;&#x578B;&#x7684;&#x5BA2;&#x89C2;&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x6570;&#x636E;&#x548C;&#x64CD;&#x4F5C;&#x7ED1;&#x5B9A;&#x5728;&#x4E00;&#x8D77;&#xFF0C;&#x5C01;&#x88C5;&#x6210;&#x7C7B;&#xFF0C;&#x5E76;&#x4E14;&#x5141;&#x8BB8;&#x5206;&#x6210;&#x4E0D;&#x540C;&#x5C42;&#x6B21;&#x8FDB;&#x884C;&#x62BD;&#x8C61;&#xFF0C;&#x901A;&#x8FC7;&#x7EE7;&#x627F;&#x5B9E;&#x73B0;&#x5C5E;&#x6027;&#x548C;&#x64CD;&#x4F5C;&#x7684;&#x5171;&#x4EAB;<ul>
<li>&#x9762;&#x5411;&#x5BF9;&#x8C61;&#x7684;&#x5206;&#x6790; OOA</li>
<li>&#x9762;&#x5411;&#x5BF9;&#x8C61;&#x7684;&#x8BBE;&#x8BA1; OOD</li>
<li>&#x9762;&#x5411;&#x5BF9;&#x8C61;&#x7684;&#x7F16;&#x7A0B; OOP</li>
</ul>
</li>
</ul>
<h3 id="t11.1 &#x6982;&#x5FF5;">1.1 &#x6982;&#x5FF5; <a href="#t11.1 &#x6982;&#x5FF5;"> # </a></h3>
<ul>
<li>&#x7C7B;&#x3001;&#x5BF9;&#x8C61;(&#x5B9E;&#x4F8B;)</li>
<li>&#x7236;&#x7C7B;&#x662F;&#x516C;&#x5171;&#x7684;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Animal</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">this</span>.name=name;
    }
    eat() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span> eat`</span>)
    }
}
<span class="hljs-keyword">let</span> animal=<span class="hljs-keyword">new</span> Person(<span class="hljs-string">&apos;&#x52A8;&#x7269;&apos;</span>);
animal.eat();
</code></pre>
<h3 id="t21.2 &#x7EE7;&#x627F;">1.2 &#x7EE7;&#x627F; <a href="#t21.2 &#x7EE7;&#x627F;"> # </a></h3>
<ul>
<li>&#x5B50;&#x7C7B;&#x7EE7;&#x627F;&#x7236;&#x7C7B;</li>
<li>&#x7EE7;&#x627F;&#x53EF;&#x4EE5;&#x628A;&#x516C;&#x5171;&#x65B9;&#x6CD5;&#x62BD;&#x79BB;&#x51FA;&#x6765;&#xFF0C;&#x63D0;&#x9AD8;&#x590D;&#x7528;&#xFF0C;&#x51CF;&#x5C11;&#x5197;&#x4F59;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Animal</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">this</span>.name=name;
    }
    eat() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span> eat`</span>)
    }
    speak() {

    }
}
<span class="hljs-keyword">let</span> animal=<span class="hljs-keyword">new</span> Animal(<span class="hljs-string">&apos;&#x52A8;&#x7269;&apos;</span>);
animal.eat();

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Dog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Animal</span></span>{
    <span class="hljs-keyword">constructor</span>(name,age) {
        <span class="hljs-keyword">super</span>(name);
        <span class="hljs-keyword">this</span>.age=age;
    }
    speak() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span> is barking!`</span>);
    }
}
<span class="hljs-keyword">let</span> dog=<span class="hljs-keyword">new</span> Dog(<span class="hljs-string">&apos;&#x1F436;&apos;</span>,<span class="hljs-number">5</span>);
dog.eat();
dog.bark();
</code></pre>
<h3 id="t31.3 &#x5C01;&#x88C5;">1.3 &#x5C01;&#x88C5; <a href="#t31.3 &#x5C01;&#x88C5;"> # </a></h3>
<ul>
<li>&#x628A;&#x6570;&#x636E;&#x5C01;&#x88C5;&#x8D77;&#x6765;</li>
<li>&#x51CF;&#x5C11;&#x8026;&#x5408;&#xFF0C;&#x4E0D;&#x8BE5;&#x5916;&#x90E8;&#x8BBF;&#x95EE;&#x7684;&#x4E0D;&#x8981;&#x8BA9;&#x5916;&#x90E8;&#x8BBF;&#x95EE;</li>
<li>&#x5229;&#x4E8E;&#x6570;&#x636E;&#x7684;&#x63A5;&#x53E3;&#x6743;&#x9650;&#x7BA1;&#x7406;</li>
<li>ES6 &#x76EE;&#x524D;&#x4E0D;&#x652F;&#x6301;&#xFF0C;&#x4E00;&#x822C;&#x8BA4;&#x4E3A;_&#x5F00;&#x5934;&#x7684;&#x90FD;&#x4F1A;&#x79C1;&#x6709;&#x7684;&#xFF0C;&#x4E0D;&#x8981;&#x4F7F;&#x7528;</li>
<li>&#x5B9E;&#x73B0;<ul>
<li>public:&#x516C;&#x6709;&#x4FEE;&#x9970;&#x7B26;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x7C7B;&#x5185;&#x6216;&#x8005;&#x7C7B;&#x5916;&#x4F7F;&#x7528;public&#x4FEE;&#x9970;&#x7684;&#x5C5E;&#x6027;&#x6216;&#x8005;&#x884C;&#x4E3A;&#xFF0C;&#x9ED8;&#x8BA4;&#x4FEE;&#x9970;&#x7B26;</li>
<li>protected:&#x53D7;&#x4FDD;&#x62A4;&#x7684;&#x4FEE;&#x9970;&#x7B26;&#xFF0C;&#x53EF;&#x4EE5;&#x672C;&#x7C7B;&#x548C;&#x5B50;&#x7C7B;&#x4E2D;&#x4F7F;&#x7528;protected&#x4FEE;&#x9970;&#x7684;&#x5C5E;&#x6027;&#x548C;&#x884C;&#x4E3A;</li>
<li>private : &#x79C1;&#x6709;&#x4FEE;&#x9970;&#x7B26;&#xFF0C;&#x53EA;&#x53EF;&#x4EE5;&#x5728;&#x7C7B;&#x5185;&#x4F7F;&#x7528;private&#x4FEE;&#x9970;&#x7684;&#x5C5E;&#x6027;&#x548C;&#x884C;&#x4E3A;</li>
</ul>
</li>
</ul>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Animal</span> </span>{
    public name;
    protected age;
    private weight;
    <span class="hljs-keyword">constructor</span>(name,age,weight) {
        <span class="hljs-keyword">this</span>.name=name;
        <span class="hljs-keyword">this</span>.age=age;
        <span class="hljs-keyword">this</span>.weight=weight;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Animal</span> </span>{
    private money;
    <span class="hljs-keyword">constructor</span>(name,age,weight,money) {
        <span class="hljs-keyword">super</span>(name,age,weight);
        <span class="hljs-keyword">this</span>.money=money;
    }
    getName() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
    }
    getAge() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.age);
    }
    getWeight() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.weight);
    }
}
<span class="hljs-keyword">let</span> p=<span class="hljs-keyword">new</span> Person(<span class="hljs-string">&apos;zfpx&apos;</span>,<span class="hljs-number">9</span>,<span class="hljs-number">100</span>,<span class="hljs-number">100</span>);
<span class="hljs-built_in">console</span>.log(p.name);
<span class="hljs-built_in">console</span>.log(p.age);
<span class="hljs-built_in">console</span>.log(p.weight);
</code></pre>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>: {
        <span class="hljs-attr">rules</span>: [
            {
                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.js$/</span>,
                <span class="hljs-attr">use</span>: {
                    <span class="hljs-attr">loader</span>: <span class="hljs-string">&apos;babel-loader&apos;</span>,
                    <span class="hljs-attr">options</span>: {
                        <span class="hljs-attr">presets</span>:[<span class="hljs-string">&quot;@babel/preset-env&quot;</span>]
                    }
                }
            },
            {
                <span class="hljs-attr">test</span>: <span class="hljs-regexp">/\.ts$/</span>,
                <span class="hljs-attr">use</span>: {
                    <span class="hljs-attr">loader</span>: <span class="hljs-string">&apos;ts-loader&apos;</span>
                }
            }
        ]
    }
</code></pre>
<h3 id="t41.4 &#x591A;&#x6001;">1.4 &#x591A;&#x6001; <a href="#t41.4 &#x591A;&#x6001;"> # </a></h3>
<ul>
<li>&#x540C;&#x4E00;&#x4E2A;&#x63A5;&#x53E3;&#x53EF;&#x4EE5;&#x4E0D;&#x540C;&#x5B9E;&#x73B0;</li>
<li>&#x4FDD;&#x6301;&#x5B50;&#x7C7B;&#x7684;&#x5F00;&#x653E;&#x6027;&#x548C;&#x7075;&#x6D3B;&#x6027;</li>
<li>&#x9762;&#x5411;&#x63A5;&#x53E3;&#x7F16;&#x7A0B;  </li>
</ul>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Animal</span> </span>{
    public name;
    protected age;
    private weight;
    <span class="hljs-keyword">constructor</span>(name,age,weight) {
        <span class="hljs-keyword">this</span>.name=name;
        <span class="hljs-keyword">this</span>.age=age;
        <span class="hljs-keyword">this</span>.weight=weight;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Animal</span> </span>{
    private money;
    <span class="hljs-keyword">constructor</span>(name,age,weight,money) {
        <span class="hljs-keyword">super</span>(name,age,weight);
        <span class="hljs-keyword">this</span>.money=money;
    }
    speak() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x4F60;&#x597D;!&apos;</span>);
    }    
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Dog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Animal</span> </span>{
    private money;
    <span class="hljs-keyword">constructor</span>(name,age,weight) {
        <span class="hljs-keyword">super</span>(name,age,weight);
    }
    speak() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x6C6A;&#x6C6A;&#x6C6A;!&apos;</span>);
    }    
}

<span class="hljs-keyword">let</span> p=<span class="hljs-keyword">new</span> Person(<span class="hljs-string">&apos;zfpx&apos;</span>,<span class="hljs-number">10</span>,<span class="hljs-number">10</span>,<span class="hljs-number">10</span>);
p.speak();
<span class="hljs-keyword">let</span> d=<span class="hljs-keyword">new</span> Dog(<span class="hljs-string">&apos;zfpx&apos;</span>,<span class="hljs-number">10</span>,<span class="hljs-number">10</span>);
d.speak();
</code></pre>
<h2 id="t52. &#x8BBE;&#x8BA1;&#x539F;&#x5219;">2. &#x8BBE;&#x8BA1;&#x539F;&#x5219; <a href="#t52. &#x8BBE;&#x8BA1;&#x539F;&#x5219;"> # </a></h2>
<h3 id="t62.1 &#x4EC0;&#x4E48;&#x662F;&#x8BBE;&#x8BA1;&#xFF1F;">2.1 &#x4EC0;&#x4E48;&#x662F;&#x8BBE;&#x8BA1;&#xFF1F; <a href="#t62.1 &#x4EC0;&#x4E48;&#x662F;&#x8BBE;&#x8BA1;&#xFF1F;"> # </a></h3>
<ul>
<li>&#x6309;&#x54EA;&#x4E00;&#x79CD;&#x601D;&#x8DEF;&#x6216;&#x8005;&#x6807;&#x51C6;&#x6765;&#x5B9E;&#x73B0;&#x529F;&#x80FD;</li>
<li>&#x529F;&#x80FD;&#x76F8;&#x540C;&#xFF0C;&#x53EF;&#x4EE5;&#x6709;&#x4E0D;&#x540C;&#x8BBE;&#x8BA1;&#x7684;&#x65B9;&#x5F0F;</li>
<li>&#x9700;&#x6C42;&#x5982;&#x679C;&#x4E0D;&#x65AD;&#x53D8;&#x5316;&#xFF0C;&#x8BBE;&#x8BA1;&#x7684;&#x4F5C;&#x7528;&#x624D;&#x80FD;&#x4F53;&#x73B0;&#x51FA;&#x6765;</li>
</ul>
<h2 id="t72.2 SOLID&#x4E94;&#x5927;&#x8BBE;&#x8BA1;&#x539F;&#x5219;">2.2 SOLID&#x4E94;&#x5927;&#x8BBE;&#x8BA1;&#x539F;&#x5219; <a href="#t72.2 SOLID&#x4E94;&#x5927;&#x8BBE;&#x8BA1;&#x539F;&#x5219;"> # </a></h2>
<table>
<thead>
<tr>
<th style="text-align:left">&#x9996;&#x5B57;&#x6BCD;</th>
<th style="text-align:left">&#x6307;&#x4EE3;</th>
<th style="text-align:left">&#x6982;&#x5FF5;</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">S</td>
<td style="text-align:left">&#x5355;&#x4E00;&#x804C;&#x8D23;&#x539F;&#x5219;</td>
<td style="text-align:left">&#x5355;&#x4E00;&#x529F;&#x80FD;&#x539F;&#x5219;&#x8BA4;&#x4E3A;&#x5BF9;&#x8C61;&#x5E94;&#x8BE5;&#x4EC5;&#x5177;&#x6709;&#x4E00;&#x79CD;&#x5355;&#x4E00;&#x529F;&#x80FD;&#x7684;&#x6982;&#x5FF5;&#x3002;</td>
</tr>
<tr>
<td style="text-align:left">O</td>
<td style="text-align:left">&#x5F00;&#x653E;&#x5C01;&#x95ED;&#x539F;&#x5219;</td>
<td style="text-align:left">&#x5F00;&#x95ED;&#x539F;&#x5219;&#x8BA4;&#x4E3A;&#x201C;&#x8F6F;&#x4EF6;&#x4F53;&#x5E94;&#x8BE5;&#x662F;&#x5BF9;&#x4E8E;&#x6269;&#x5C55;&#x5F00;&#x653E;&#x7684;&#xFF0C;&#x4F46;&#x662F;&#x5BF9;&#x4E8E;&#x4FEE;&#x6539;&#x5C01;&#x95ED;&#x7684;&#x201D;&#x7684;&#x6982;&#x5FF5;&#x3002;</td>
</tr>
<tr>
<td style="text-align:left">L</td>
<td style="text-align:left">&#x91CC;&#x6C0F;&#x66FF;&#x6362;&#x539F;&#x5219;</td>
<td style="text-align:left">&#x91CC;&#x6C0F;&#x66FF;&#x6362;&#x539F;&#x5219;&#x8BA4;&#x4E3A;&#x201C;&#x7A0B;&#x5E8F;&#x4E2D;&#x7684;&#x5BF9;&#x8C61;&#x5E94;&#x8BE5;&#x662F;&#x53EF;&#x4EE5;&#x5728;&#x4E0D;&#x6539;&#x53D8;&#x7A0B;&#x5E8F;&#x6B63;&#x786E;&#x6027;&#x7684;&#x524D;&#x63D0;&#x4E0B;&#x88AB;&#x5B83;&#x7684;&#x5B50;&#x7C7B;&#x6240;&#x66FF;&#x6362;&#x7684;&#x201D;&#x7684;&#x6982;&#x5FF5;&#x3002;&#x53C2;&#x8003; &#x5951;&#x7EA6;&#x5F0F;&#x8BBE;&#x8BA1;&#x3002;</td>
</tr>
<tr>
<td style="text-align:left">I</td>
<td style="text-align:left">&#x63A5;&#x53E3;&#x9694;&#x79BB;&#x539F;&#x5219;</td>
<td style="text-align:left">&#x63A5;&#x53E3;&#x9694;&#x79BB;&#x539F;&#x5219;&#x8BA4;&#x4E3A;&#x201C;&#x591A;&#x4E2A;&#x7279;&#x5B9A;&#x5BA2;&#x6237;&#x7AEF;&#x63A5;&#x53E3;&#x8981;&#x597D;&#x4E8E;&#x4E00;&#x4E2A;&#x5BBD;&#x6CDB;&#x7528;&#x9014;&#x7684;&#x63A5;&#x53E3;&#x201D;[5] &#x7684;&#x6982;&#x5FF5;&#x3002;</td>
</tr>
<tr>
<td style="text-align:left">D</td>
<td style="text-align:left">&#x4F9D;&#x8D56;&#x53CD;&#x8F6C;&#x539F;&#x5219;</td>
<td style="text-align:left">&#x4F9D;&#x8D56;&#x53CD;&#x8F6C;&#x539F;&#x5219;&#x8BA4;&#x4E3A;&#x4E00;&#x4E2A;&#x65B9;&#x6CD5;&#x5E94;&#x8BE5;&#x9075;&#x4ECE;&#x201C;&#x4F9D;&#x8D56;&#x4E8E;&#x62BD;&#x8C61;&#x800C;&#x4E0D;&#x662F;&#x4E00;&#x4E2A;&#x5B9E;&#x4F8B;&#x201D;[5] &#x7684;&#x6982;&#x5FF5;&#x3002;&#x4F9D;&#x8D56;&#x6CE8;&#x5165;&#x662F;&#x8BE5;&#x539F;&#x5219;&#x7684;&#x4E00;&#x79CD;&#x5B9E;&#x73B0;&#x65B9;&#x5F0F;&#x3002;</td>
</tr>
</tbody>
</table>
<h3 id="t82.2.1 S &#x5355;&#x4E00;&#x804C;&#x8D23;&#x539F;&#x5219;">2.2.1 S &#x5355;&#x4E00;&#x804C;&#x8D23;&#x539F;&#x5219; <a href="#t82.2.1 S &#x5355;&#x4E00;&#x804C;&#x8D23;&#x539F;&#x5219;"> # </a></h3>
<ul>
<li>Single responsibility principle</li>
<li>&#x4E00;&#x4E2A;&#x7A0B;&#x5E8F;&#x53EA;&#x505A;&#x597D;&#x4E00;&#x4EF6;&#x4E8B;</li>
<li>&#x5982;&#x679C;&#x529F;&#x80FD;&#x7279;&#x522B;&#x590D;&#x6742;&#x5C31;&#x8FDB;&#x884C;&#x62C6;&#x5206;</li>
</ul>
<h3 id="t92.2.2 O &#x5F00;&#x653E;&#x5C01;&#x95ED;&#x539F;&#x5219;">2.2.2 O &#x5F00;&#x653E;&#x5C01;&#x95ED;&#x539F;&#x5219; <a href="#t92.2.2 O &#x5F00;&#x653E;&#x5C01;&#x95ED;&#x539F;&#x5219;"> # </a></h3>
<ul>
<li>Open Closed Principle</li>
<li>&#x5BF9;&#x6269;&#x5C55;&#x5F00;&#x653E;&#xFF0C;&#x5BF9;&#x4FEE;&#x6539;&#x5173;&#x95ED;</li>
<li>&#x589E;&#x52A0;&#x9700;&#x6C42;&#x65F6;&#xFF0C;&#x6269;&#x5C55;&#x65B0;&#x4EE3;&#x7801;&#xFF0C;&#x800C;&#x975E;&#x4FEE;&#x6539;&#x5DF2;&#x6709;&#x4EE3;&#x7801;</li>
<li>&#x8FD9;&#x662F;&#x8F6F;&#x4EF6;&#x8BBE;&#x8BA1;&#x7684;&#x7EC8;&#x6781;&#x76EE;&#x6807;</li>
</ul>
<p>src/utils/request.js</p>
<pre><code class="lang-js">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">parseJSON</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">return</span> response.json();
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkStatus</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.status &gt;= <span class="hljs-number">200</span> &amp;&amp; response.status &lt; <span class="hljs-number">300</span>) {
    <span class="hljs-keyword">return</span> response;
  }

  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.statusText);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}


<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">request</span>(<span class="hljs-params">url, options</span>) </span>{
  <span class="hljs-keyword">return</span> fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(<span class="hljs-function"><span class="hljs-params">data</span>=&gt;</span>{data})
    .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> ({ err }));
}
</code></pre>
<h3 id="t102.2.3 L &#x91CC;&#x6C0F;&#x66FF;&#x6362;&#x539F;&#x5219;">2.2.3 L &#x91CC;&#x6C0F;&#x66FF;&#x6362;&#x539F;&#x5219; <a href="#t102.2.3 L &#x91CC;&#x6C0F;&#x66FF;&#x6362;&#x539F;&#x5219;"> # </a></h3>
<ul>
<li>Liskov Substitution Principle</li>
<li>&#x5B50;&#x7C7B;&#x80FD;&#x8986;&#x76D6;&#x7236;&#x7C7B;</li>
<li>&#x7236;&#x7C7B;&#x80FD;&#x51FA;&#x73B0;&#x7684;&#x5730;&#x65B9;&#x5B50;&#x7C7B;&#x5C31;&#x80FD;&#x51FA;&#x73B0;</li>
<li>JS&#x4F7F;&#x7528;&#x6BD4;&#x8F83;&#x5C11;</li>
</ul>
<h3 id="t112.2.4  I &#x63A5;&#x53E3;&#x9694;&#x79BB;&#x539F;&#x5219;">2.2.4  I &#x63A5;&#x53E3;&#x9694;&#x79BB;&#x539F;&#x5219; <a href="#t112.2.4  I &#x63A5;&#x53E3;&#x9694;&#x79BB;&#x539F;&#x5219;"> # </a></h3>
<ul>
<li>Interface Segregation Principle</li>
<li>&#x4FDD;&#x6301;&#x63A5;&#x53E3;&#x7684;&#x5355;&#x4E00;&#x72EC;&#x7ACB;&#xFF0C;&#x907F;&#x514D;&#x51FA;&#x73B0;&#x80D6;&#x63A5;&#x53E3;</li>
<li>JS&#x4E2D;&#x6CA1;&#x6709;&#x63A5;&#x53E3;&#xFF0C;&#x4F7F;&#x7528;&#x8F83;&#x5C11;</li>
<li>&#x7C7B;&#x4F3C;&#x4E8E;&#x5355;&#x4E00;&#x804C;&#x8D23;&#x539F;&#x5219;&#xFF0C;&#x66F4;&#x5173;&#x6CE8;&#x63A5;&#x53E3;</li>
</ul>
<h3 id="t122.2.5 D &#x4F9D;&#x8D56;&#x5012;&#x7F6E;&#x539F;&#x5219;">2.2.5 D &#x4F9D;&#x8D56;&#x5012;&#x7F6E;&#x539F;&#x5219; <a href="#t122.2.5 D &#x4F9D;&#x8D56;&#x5012;&#x7F6E;&#x539F;&#x5219;"> # </a></h3>
<ul>
<li>Dependence Inversion Principle</li>
<li>&#x9762;&#x5411;&#x63A5;&#x53E3;&#x7F16;&#x7A0B;&#xFF0C;&#x4F9D;&#x8D56;&#x4E8E;&#x62BD;&#x8C61;&#x800C;&#x4E0D;&#x4F9D;&#x8D56;&#x4E8E;&#x5177;&#x4F53;&#x5B9E;&#x73B0;</li>
<li>&#x4F7F;&#x7528;&#x65B9;&#x53EA;&#x5173;&#x6CE8;&#x63A5;&#x53E3;&#x800C;&#x4E0D;&#x5173;&#x6CE8;&#x5177;&#x4F53;&#x7C7B;&#x7684;&#x5B9E;&#x73B0;</li>
<li>JS&#x4E2D;&#x4F7F;&#x7528;&#x8F83;&#x5C11;&#xFF08;&#x6CA1;&#x6709;&#x63A5;&#x53E3;&#xFF0C;&#x5F31;&#x7C7B;&#x578B;&#xFF09;</li>
</ul>
<h2 id="t133. 23&#x79CD;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;">3. 23&#x79CD;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F; <a href="#t133. 23&#x79CD;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;"> # </a></h2>
<h3 id="t143.1 &#x521B;&#x5EFA;&#x578B;">3.1 &#x521B;&#x5EFA;&#x578B; <a href="#t143.1 &#x521B;&#x5EFA;&#x578B;"> # </a></h3>
<ul>
<li>&#x5DE5;&#x5382;&#x6A21;&#x5F0F;(&#x5DE5;&#x5382;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F;&#x3001;&#x62BD;&#x8C61;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;&#x3001;&#x7B80;&#x5355;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;)</li>
<li>&#x5EFA;&#x9020;&#x8005;&#x6A21;&#x5F0F;</li>
<li>&#x5355;&#x4F8B;&#x6A21;&#x5F0F;</li>
<li>&#x539F;&#x578B;&#x6A21;&#x5F0F;</li>
</ul>
<h3 id="t153.2 &#x7ED3;&#x6784;&#x578B;&#x6A21;&#x5F0F;">3.2 &#x7ED3;&#x6784;&#x578B;&#x6A21;&#x5F0F; <a href="#t153.2 &#x7ED3;&#x6784;&#x578B;&#x6A21;&#x5F0F;"> # </a></h3>
<ul>
<li>&#x9002;&#x914D;&#x5668;&#x6A21;&#x5F0F;</li>
<li>&#x88C5;&#x9970;&#x5668;&#x6A21;&#x5F0F;</li>
<li>&#x4EE3;&#x7406;&#x6A21;&#x5F0F;</li>
<li>&#x5916;&#x89C2;&#x6A21;&#x5F0F;</li>
<li>&#x5DE7;&#x63A5;&#x6A21;&#x5F0F;</li>
<li>&#x7EC4;&#x5408;&#x6A21;&#x5F0F;</li>
<li>&#x4EAB;&#x5143;&#x6A21;&#x5F0F;</li>
</ul>
<h3 id="t163.3 &#x884C;&#x4E3A;&#x578B;">3.3 &#x884C;&#x4E3A;&#x578B; <a href="#t163.3 &#x884C;&#x4E3A;&#x578B;"> # </a></h3>
<ul>
<li>&#x7B56;&#x7565;&#x6A21;&#x5F0F;</li>
<li>&#x6A21;&#x7248;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F;</li>
<li>&#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;</li>
<li>&#x8FED;&#x4EE3;&#x5668;&#x6A21;&#x5F0F;</li>
<li>&#x804C;&#x8D23;&#x94FE;&#x6A21;&#x5F0F;</li>
<li>&#x547D;&#x4EE4;&#x6A21;&#x5F0F;</li>
<li>&#x5907;&#x5FD8;&#x5F55;&#x6A21;&#x5F0F;</li>
<li>&#x72B6;&#x6001;&#x6A21;&#x5F0F;</li>
<li>&#x8BBF;&#x95EE;&#x8005;&#x6A21;&#x5F0F;</li>
<li>&#x4E2D;&#x4ECB;&#x8005;&#x6A21;&#x5F0F;</li>
<li>&#x89E3;&#x91CA;&#x5668;&#x6A21;&#x5F0F;</li>
</ul>
<h2 id="t174. &#x5DE5;&#x5382;&#x6A21;&#x5F0F;">4. &#x5DE5;&#x5382;&#x6A21;&#x5F0F; <a href="#t174. &#x5DE5;&#x5382;&#x6A21;&#x5F0F;"> # </a></h2>
<h3 id="t184.1 &#x7B80;&#x5355;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;">4.1 &#x7B80;&#x5355;&#x5DE5;&#x5382;&#x6A21;&#x5F0F; <a href="#t184.1 &#x7B80;&#x5355;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;"> # </a></h3>
<ul>
<li>&#x7B80;&#x5355;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;&#x662F;&#x7531;&#x4E00;&#x4E2A;&#x5DE5;&#x5382;&#x5BF9;&#x8C61;&#x51B3;&#x5B9A;&#x521B;&#x5EFA;&#x51FA;&#x54EA;&#x4E00;&#x79CD;&#x4EA7;&#x54C1;&#x7C7B;&#x7684;&#x5B9E;&#x4F8B;<h4 id="t194.1.1 &#x7C7B;&#x56FE;">4.1.1 &#x7C7B;&#x56FE; <a href="#t194.1.1 &#x7C7B;&#x56FE;"> # </a></h4>
</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192757_d81529bf_1720749.jpeg" alt="simplefactory"></p>
<h4 id="t204.1.2 &#x4EE3;&#x7801;">4.1.2 &#x4EE3;&#x7801; <a href="#t204.1.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Plant</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">this</span>.name=name;
    }
    grow() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;growing~~~~~~&apos;</span>);    
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Apple</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Plant</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">super</span>(name);
        <span class="hljs-keyword">this</span>.taste=<span class="hljs-string">&apos;&#x751C;&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Orange</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Plant</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">super</span>(name);
        <span class="hljs-keyword">this</span>.taste=<span class="hljs-string">&apos;&#x9178;&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Factory</span></span>{
    <span class="hljs-keyword">static</span> create(name) {
        <span class="hljs-keyword">switch</span> (name) {
            <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;apple&apos;</span>:
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Apple(<span class="hljs-string">&apos;&#x82F9;&#x679C;&apos;</span>);
            <span class="hljs-keyword">case</span> <span class="hljs-string">&apos;orange&apos;</span>:
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Orange(<span class="hljs-string">&apos;&#x6A58;&#x5B50;&apos;</span>);
        }
    }
}
<span class="hljs-keyword">let</span> apple=Factory.create(<span class="hljs-string">&apos;apple&apos;</span>);
<span class="hljs-built_in">console</span>.log(apple);
<span class="hljs-keyword">let</span> orange=Factory.create(<span class="hljs-string">&apos;orange&apos;</span>);
<span class="hljs-built_in">console</span>.log(orange);
</code></pre>
<h4 id="t214.1.3 &#x7ECF;&#x5178;&#x573A;&#x666F;">4.1.3 &#x7ECF;&#x5178;&#x573A;&#x666F; <a href="#t214.1.3 &#x7ECF;&#x5178;&#x573A;&#x666F;"> # </a></h4>
<h5 id="t224.1.3.1 jQuery">4.1.3.1 jQuery <a href="#t224.1.3.1 jQuery"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">jQuery</span></span>{
    <span class="hljs-keyword">constructor</span>(selector){
        <span class="hljs-keyword">let</span> elements = <span class="hljs-built_in">Array</span>.from(<span class="hljs-built_in">document</span>.querySelectorAll(selector));
        <span class="hljs-keyword">let</span> length = elements?elements.length:<span class="hljs-number">0</span>;
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;length;i++){
            <span class="hljs-keyword">this</span>[i]=elements[i];
        }
        <span class="hljs-keyword">this</span>.length = length;
    }
    html(){

    }
}
<span class="hljs-built_in">window</span>.$ = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">selector</span>)</span>{
   <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> jQuery(selector);
}
</code></pre>
<h5 id="t234.1.3.2 React">4.1.3.2 React <a href="#t234.1.3.2 React"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Vnode</span></span>{
    <span class="hljs-keyword">constructor</span>(tag,attrs,children){
        <span class="hljs-keyword">this</span>.tag = tag;
        <span class="hljs-keyword">this</span>.attrs = attrs;
        <span class="hljs-keyword">this</span>.children = children;
    }
}
React.createElement = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">tag,attrs,children</span>)</span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Vnode(tag,attr,children);
}
</code></pre>
<h3 id="t244.2 &#x5DE5;&#x5382;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F;">4.2 &#x5DE5;&#x5382;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F; <a href="#t244.2 &#x5DE5;&#x5382;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F;"> # </a></h3>
<ul>
<li>&#x5DE5;&#x5382;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F;Factory Method&#xFF0C;&#x53C8;&#x79F0;&#x591A;&#x6001;&#x6027;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;&#x3002;</li>
<li>&#x5728;&#x5DE5;&#x5382;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F;&#x4E2D;&#xFF0C;&#x6838;&#x5FC3;&#x7684;&#x5DE5;&#x5382;&#x7C7B;&#x4E0D;&#x518D;&#x8D1F;&#x8D23;&#x6240;&#x6709;&#x7684;&#x4EA7;&#x54C1;&#x7684;&#x521B;&#x5EFA;&#xFF0C;&#x800C;&#x662F;&#x5C06;&#x5177;&#x4F53;&#x521B;&#x5EFA;&#x7684;&#x5DE5;&#x4F5C;&#x4EA4;&#x7ED9;&#x5B50;&#x7C7B;&#x53BB;&#x505A;&#x3002;</li>
</ul>
<h4 id="t254.2.1 &#x7C7B;&#x56FE;">4.2.1 &#x7C7B;&#x56FE; <a href="#t254.2.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192757_4be3dac2_1720749.jpeg" alt="factorymethod"></p>
<h4 id="t264.2.2 &#x4EE3;&#x7801;">4.2.2 &#x4EE3;&#x7801; <a href="#t264.2.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Plant</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">this</span>.name=name;
    }
    grow() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;growing~~~~~~&apos;</span>);    
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Apple</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Plant</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">super</span>(name);
        <span class="hljs-keyword">this</span>.taste=<span class="hljs-string">&apos;&#x751C;&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Orange</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Plant</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">super</span>(name);
        <span class="hljs-keyword">this</span>.taste=<span class="hljs-string">&apos;&#x9178;&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppleFactory</span></span>{
    create() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Apple();
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">OrangeFactory</span></span>{
    create() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Orange();
    }
}
<span class="hljs-keyword">const</span> settings={
    <span class="hljs-string">&apos;apple&apos;</span>: AppleFactory,
    <span class="hljs-string">&apos;orange&apos;</span>:OrangeFactory
}
<span class="hljs-keyword">let</span> apple=<span class="hljs-keyword">new</span> settings[<span class="hljs-string">&apos;apple&apos;</span>]().create();
<span class="hljs-built_in">console</span>.log(apple);
<span class="hljs-keyword">let</span> orange=<span class="hljs-keyword">new</span> settings[<span class="hljs-string">&apos;orange&apos;</span>]().create();
<span class="hljs-built_in">console</span>.log(orange);
</code></pre>
<h3 id="t274.3 &#x62BD;&#x8C61;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;">4.3 &#x62BD;&#x8C61;&#x5DE5;&#x5382;&#x6A21;&#x5F0F; <a href="#t274.3 &#x62BD;&#x8C61;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;"> # </a></h3>
<ul>
<li>&#x62BD;&#x8C61;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;&#x662F;&#x6307;&#x5F53;&#x6709;&#x591A;&#x4E2A;&#x62BD;&#x8C61;&#x89D2;&#x8272;&#x65F6;&#xFF0C;&#x4F7F;&#x7528;&#x7684;&#x4E00;&#x79CD;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;</li>
<li>&#x62BD;&#x8C61;&#x5DE5;&#x5382;&#x6A21;&#x5F0F;&#x53EF;&#x4EE5;&#x5411;&#x5BA2;&#x6237;&#x7AEF;&#x63D0;&#x4F9B;&#x4E00;&#x4E2A;&#x63A5;&#x53E3;&#xFF0C;&#x4F7F;&#x5BA2;&#x6237;&#x7AEF;&#x5728;&#x4E0D;&#x5FC5;&#x6307;&#x5B9A;&#x4EA7;&#x54C1;&#x7684;&#x5177;&#x4F53;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x521B;&#x5EFA;&#x591A;&#x4E2A;&#x4EA7;&#x54C1;&#x65CF;&#x4E2D;&#x7684;&#x4EA7;&#x54C1;&#x5BF9;&#x8C61;</li>
</ul>
<h4 id="t284.3.1 &#x7C7B;&#x56FE;">4.3.1 &#x7C7B;&#x56FE; <a href="#t284.3.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192757_7dc3c74a_1720749.jpeg" alt="abstractfactory"></p>
<h4 id="t294.3.2 &#x4EE3;&#x7801;">4.3.2 &#x4EE3;&#x7801; <a href="#t294.3.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Button</span></span>{
    render() {

    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppleButton</span></span>{
    render() {
       <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x82F9;&#x679C;&#x6309;&#x94AE;&apos;</span>);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">WindowButton</span></span>{
    render() {
       <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;Windows&#x6309;&#x94AE;&apos;</span>);
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Icon</span></span>{
    render() {

    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppleIcon</span></span>{
    render() {
       <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x82F9;&#x679C;&#x56FE;&#x6807;&apos;</span>);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">WindowIcon</span></span>{
    render() {
       <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;Windows&#x56FE;&#x6807;&apos;</span>);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Factory</span></span>{
    createButton() {}
    createIcon() {}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppleFactory</span></span>{
    createButton() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> AppleButton();
    }
    createIcon() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> AppleButton();
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">WindowsFactory</span></span>{
    createButton() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> WindowButton();
    }
    createIcon() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> WindowIcon();
    }
}
<span class="hljs-keyword">const</span> settings={
    <span class="hljs-string">&apos;apple&apos;</span>: AppleFactory,
    <span class="hljs-string">&apos;windows&apos;</span>:WindowsFactory
}
<span class="hljs-keyword">let</span> appleFactory=<span class="hljs-keyword">new</span> settings[<span class="hljs-string">&apos;apple&apos;</span>]();
appleFactory.createButton().render();
appleFactory.createIcon().render();

<span class="hljs-keyword">let</span> windowsFactory=<span class="hljs-keyword">new</span> settings[<span class="hljs-string">&apos;windows&apos;</span>]();
windowsFactory.createButton().render();
windowsFactory.createIcon().render();
</code></pre>
<h2 id="t305.&#x5355;&#x4F8B;&#x6A21;&#x5F0F;">5.&#x5355;&#x4F8B;&#x6A21;&#x5F0F; <a href="#t305.&#x5355;&#x4F8B;&#x6A21;&#x5F0F;"> # </a></h2>
<h4 id="t315.1 &#x7C7B;&#x56FE;">5.1 &#x7C7B;&#x56FE; <a href="#t315.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><a href="http://img.zhufengpeixun.cn/singleobject.jpg">singleobject</a></p>
<h4 id="t325.2 &#x4EE3;&#x7801;">5.2 &#x4EE3;&#x7801; <a href="#t325.2 &#x4EE3;&#x7801;"> # </a></h4>
<h5 id="t335.2.1 typescript">5.2.1 typescript <a href="#t335.2.1 typescript"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Window</span> </span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">this</span>.name = name;
    }
    <span class="hljs-keyword">static</span> getInstance(name) {
        <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.instance) {
            <span class="hljs-keyword">this</span>.instance = <span class="hljs-keyword">new</span> Window(name);
        }
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.instance;
    }
}

<span class="hljs-keyword">var</span> w1 = Window.getInstance();
<span class="hljs-keyword">var</span> w2 = Window.getInstance();
<span class="hljs-built_in">console</span>.log(w1 === w2);
</code></pre>
<h5 id="t345.2.2 ES5&#x5355;&#x4F8B;&#x6A21;&#x5F0F;">5.2.2 ES5&#x5355;&#x4F8B;&#x6A21;&#x5F0F; <a href="#t345.2.2 ES5&#x5355;&#x4F8B;&#x6A21;&#x5F0F;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">let</span>  Window = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">name</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
}
Window.prototype.getName=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
}
Window.getInstance=(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> <span class="hljs-built_in">window</span>=<span class="hljs-literal">null</span>;
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name</span>) </span>{
        <span class="hljs-keyword">if</span> (!<span class="hljs-built_in">window</span>)
           <span class="hljs-built_in">window</span>=<span class="hljs-keyword">new</span> Window(name);
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>;
    }
})();
<span class="hljs-keyword">let</span> <span class="hljs-built_in">window</span>=Window.getInstance(<span class="hljs-string">&apos;zfpx&apos;</span>);
<span class="hljs-built_in">window</span>.getName();
</code></pre>
<h5 id="t355.2.3 &#x900F;&#x660E;&#x5355;&#x4F8B;">5.2.3 &#x900F;&#x660E;&#x5355;&#x4F8B; <a href="#t355.2.3 &#x900F;&#x660E;&#x5355;&#x4F8B;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> Window=(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> <span class="hljs-built_in">window</span>;
    <span class="hljs-keyword">let</span> Window=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name</span>) </span>{
        <span class="hljs-keyword">if</span> (<span class="hljs-built_in">window</span>) {
            <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>;
        } <span class="hljs-keyword">else</span> {
            <span class="hljs-keyword">this</span>.name=name;
            <span class="hljs-keyword">return</span> (<span class="hljs-built_in">window</span>=<span class="hljs-keyword">this</span>);
        }
    }
    Window.prototype.getName=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
    }
    <span class="hljs-keyword">return</span> Window;
})();

<span class="hljs-keyword">let</span> window1=<span class="hljs-keyword">new</span> Window(<span class="hljs-string">&apos;zfpx&apos;</span>);
<span class="hljs-keyword">let</span> window2=<span class="hljs-keyword">new</span> Window(<span class="hljs-string">&apos;zfpx&apos;</span>);
window1.getName();
<span class="hljs-built_in">console</span>.log(window1 === window2)
</code></pre>
<h5 id="t365.2.4 &#x5355;&#x4F8B;&#x4E0E;&#x6784;&#x5EFA;&#x5206;&#x79BB;">5.2.4 &#x5355;&#x4F8B;&#x4E0E;&#x6784;&#x5EFA;&#x5206;&#x79BB; <a href="#t365.2.4 &#x5355;&#x4F8B;&#x4E0E;&#x6784;&#x5EFA;&#x5206;&#x79BB;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Window</span>(<span class="hljs-params">name</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
}
Window.prototype.getName=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
}

<span class="hljs-keyword">let</span> createSingle=(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> instance;
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name</span>) </span>{
        <span class="hljs-keyword">if</span> (!instance) {
            instance=<span class="hljs-keyword">new</span> Window();
        }
        <span class="hljs-keyword">return</span> instance;
    }
})();

<span class="hljs-keyword">let</span> window1=<span class="hljs-keyword">new</span> createSingle(<span class="hljs-string">&apos;zfpx&apos;</span>);
<span class="hljs-keyword">let</span> window2=<span class="hljs-keyword">new</span> createSingle(<span class="hljs-string">&apos;zfpx&apos;</span>);
window1.getName();
<span class="hljs-built_in">console</span>.log(window1 === window2)
</code></pre>
<h5 id="t375.2.5 &#x5C01;&#x88C5;&#x53D8;&#x5316;">5.2.5 &#x5C01;&#x88C5;&#x53D8;&#x5316; <a href="#t375.2.5 &#x5C01;&#x88C5;&#x53D8;&#x5316;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Window</span>(<span class="hljs-params">name</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
}
Window.prototype.getName=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
}

<span class="hljs-keyword">let</span> createSingle=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">Constructor</span>) </span>{
    <span class="hljs-keyword">let</span> instance;
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">if</span> (!instance) {
            Constructor.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
            <span class="hljs-built_in">Object</span>.setPrototypeOf(<span class="hljs-keyword">this</span>,Constructor.prototype)
            instance=<span class="hljs-keyword">this</span>;
        }
        <span class="hljs-keyword">return</span> instance;
    }
};
<span class="hljs-keyword">let</span> CreateWindow=createSingle(Window);
<span class="hljs-keyword">let</span> window1=<span class="hljs-keyword">new</span> CreateWindow(<span class="hljs-string">&apos;zfpx&apos;</span>);
<span class="hljs-keyword">let</span> window2=<span class="hljs-keyword">new</span> CreateWindow(<span class="hljs-string">&apos;zfpx&apos;</span>);
window1.getName();
<span class="hljs-built_in">console</span>.log(window1 === window2)
</code></pre>
<h5 id="t385.2.6 &#x547D;&#x540D;&#x7A7A;&#x95F4;">5.2.6 &#x547D;&#x540D;&#x7A7A;&#x95F4; <a href="#t385.2.6 &#x547D;&#x540D;&#x7A7A;&#x95F4;"> # </a></h5>
<ul>
<li>&#x7528;&#x6237;&#x7F16;&#x5199;&#x7684;&#x4EE3;&#x7801;&#x4E0E;&#x5185;&#x90E8;&#x7684;&#x7C7B;/&#x51FD;&#x6570;/&#x5E38;&#x91CF;&#x6216;&#x7B2C;&#x4E09;&#x65B9;&#x7C7B;/&#x51FD;&#x6570;/&#x5E38;&#x91CF;&#x4E4B;&#x95F4;&#x7684;&#x540D;&#x5B57;&#x51B2;&#x7A81;&#x3002;</li>
<li>&#x4E3A;&#x5F88;&#x957F;&#x7684;&#x6807;&#x8BC6;&#x7B26;&#x540D;&#x79F0;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x522B;&#x540D;&#xFF08;&#x6216;&#x7B80;&#x77ED;&#xFF09;&#x7684;&#x540D;&#x79F0;&#xFF0C;&#x63D0;&#x9AD8;&#x6E90;&#x4EE3;&#x7801;&#x7684;&#x53EF;&#x8BFB;&#x6027;&#x3002;
jQuery<pre><code class="lang-js"><span class="hljs-keyword">let</span> $ = {
  ajax(){},
  get(){},
  post(){}
}
</code></pre>
</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> utils={};
utils.def=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">namespace,fn</span>) </span>{
    <span class="hljs-keyword">let</span> namespaces=namespace.split(<span class="hljs-string">&apos;.&apos;</span>);
    <span class="hljs-keyword">let</span> fnName=namespaces.pop();
    <span class="hljs-keyword">let</span> current=utils;
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;namespaces.length;i++){
        <span class="hljs-keyword">let</span> namespace=namespaces[i];
        <span class="hljs-keyword">if</span> (!current[namespace]) {
            current[namespace]={};
        }
        current=current[namespace];
    }
    current[fnName]=fn;
}
utils.def(<span class="hljs-string">&apos;dom.attr&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">key</span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;dom.attr&apos;</span>);
});
utils.def(<span class="hljs-string">&apos;dom.html&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">html</span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;dom.html&apos;</span>);
});
utils.def(<span class="hljs-string">&apos;string.trim&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;string.trim&apos;</span>);
});
utils.dom.attr(<span class="hljs-string">&apos;src&apos;</span>);
utils.string.trim(<span class="hljs-string">&apos; aaa &apos;</span>);
</code></pre>
<h4 id="t395.3 &#x573A;&#x666F;">5.3 &#x573A;&#x666F; <a href="#t395.3 &#x573A;&#x666F;"> # </a></h4>
<h5 id="t405.3.1 jQuery">5.3.1 jQuery <a href="#t405.3.1 jQuery"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">if</span>(<span class="hljs-built_in">window</span>.jQuery!=<span class="hljs-literal">null</span>){
  <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>.jQuery;
}<span class="hljs-keyword">else</span>{
    <span class="hljs-comment">//init~~~~~~~</span>
}
</code></pre>
<h5 id="t415.3.2 &#x6A21;&#x6001;&#x7A97;&#x53E3;">5.3.2 &#x6A21;&#x6001;&#x7A97;&#x53E3; <a href="#t415.3.2 &#x6A21;&#x6001;&#x7A97;&#x53E3;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Login</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.element=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;div&apos;</span>);
        <span class="hljs-keyword">this</span>.element.innerHTML=(
            <span class="hljs-string">`
            &#x7528;&#x6237;&#x540D; &lt;input type=&quot;text&quot;/&gt;
            &lt;button&gt;&#x767B;&#x5F55;&lt;/button&gt;
            `</span>
        );
        <span class="hljs-keyword">this</span>.element.style.cssText=<span class="hljs-string">&apos;width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; display: block;&apos;</span>;
        <span class="hljs-comment">/* this.element.style.width=&apos;100px&apos;;
        this.element.style.height=&apos;100px&apos;;
        this.element.style.position=&apos;absolute&apos;;
        this.element.style.left=&apos;50%&apos;;
        this.element.style.top=&apos;50%&apos;; */</span>
        <span class="hljs-built_in">document</span>.body.appendChild(<span class="hljs-keyword">this</span>.element);
    }
    show() {
        <span class="hljs-keyword">this</span>.element.style.display=<span class="hljs-string">&apos;block&apos;</span>;
    }
    hide() {
        <span class="hljs-keyword">this</span>.element.style.display=<span class="hljs-string">&apos;none&apos;</span>;
    }
}
Login.getInstance=(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> instance;
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">if</span> (!instance) {
            instance=<span class="hljs-keyword">new</span> Login();
        }
        <span class="hljs-keyword">return</span> instance;
    }
})();

<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;showBtn&apos;</span>).addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
    Login.getInstance().show();
});
<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;hideBtn&apos;</span>).addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
    Login.getInstance().hide();
});
</code></pre>
<h5 id="t425.3.3 store">5.3.3 store <a href="#t425.3.3 store"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createStore</span>(<span class="hljs-params">reducer</span>) </span>{
    <span class="hljs-keyword">let</span> state;
    <span class="hljs-keyword">let</span> listeners=[];
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getState</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> state;
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dispatch</span>(<span class="hljs-params">action</span>) </span>{
        state=reducer(state,action);
        listeners.forEach(<span class="hljs-function"><span class="hljs-params">l</span>=&gt;</span>l());
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">subscribe</span>(<span class="hljs-params">listener</span>) </span>{
        listeners.push(listener);
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
            listeners = listeners.filter(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item!=listener);
            <span class="hljs-built_in">console</span>.log(listeners);
        }
    }
    dispatch({});
    <span class="hljs-keyword">return</span> {
        getState,
        dispatch,
        subscribe
    }
}
<span class="hljs-keyword">let</span> store = createStore();
</code></pre>
<h5 id="t435.3.4 &#x7F13;&#x5B58;">5.3.4 &#x7F13;&#x5B58; <a href="#t435.3.4 &#x7F13;&#x5B58;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> fs=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;fs&apos;</span>);
<span class="hljs-keyword">let</span> cache={};
<span class="hljs-keyword">let</span> app=express();
app.get(<span class="hljs-string">&apos;/user/:id&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    <span class="hljs-keyword">let</span> id=req.params.id;
    <span class="hljs-keyword">let</span> user=cache.get(id);
    <span class="hljs-keyword">if</span> (user) {
        res.json(user);
    } <span class="hljs-keyword">else</span> {
        fs.readFile(<span class="hljs-string">`./users/<span class="hljs-subst">${id}</span>.json`</span>,<span class="hljs-string">&apos;utf8&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">err,data</span>) </span>{
            <span class="hljs-keyword">let</span> user=<span class="hljs-built_in">JSON</span>.parse(data);
            cache.put(id,user);
            res.json(user);
        });
    }
});

app.get(<span class="hljs-string">&apos;/user&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    <span class="hljs-keyword">let</span> user=req.query;
    fs.writeFile(<span class="hljs-string">`./users/<span class="hljs-subst">${user.id}</span>.json`</span>,<span class="hljs-built_in">JSON</span>.stringify(user),(err) =&gt; {
        <span class="hljs-built_in">console</span>.log(err);
        res.json({<span class="hljs-attr">code</span>: <span class="hljs-number">0</span>,<span class="hljs-attr">data</span>: <span class="hljs-string">&apos;&#x5199;&#x5165;&#x6210;&#x529F;&apos;</span>});
    });
});
app.listen(<span class="hljs-number">3000</span>);
</code></pre>
<h5 id="t445.3.5 LRU&#x7F13;&#x5B58;">5.3.5 LRU&#x7F13;&#x5B58; <a href="#t445.3.5 LRU&#x7F13;&#x5B58;"> # </a></h5>
<ul>
<li><a href="https://leetcode.com/problems/lru-cache/">lru-cache</a></li>
<li>&#x4E3A;LRU Cache&#x8BBE;&#x8BA1;&#x4E00;&#x4E2A;&#x6570;&#x636E;&#x7ED3;&#x6784;&#xFF0C;&#x5B83;&#x652F;&#x6301;&#x4E24;&#x4E2A;&#x64CD;&#x4F5C;&#xFF1A;<ul>
<li>1&#xFF09;get(key)&#xFF1A;&#x5982;&#x679C;key&#x5728;cache&#x4E2D;&#xFF0C;&#x5219;&#x8FD4;&#x56DE;&#x5BF9;&#x5E94;&#x7684;value&#x503C;&#xFF0C;&#x5426;&#x5219;&#x8FD4;&#x56DE;-1</li>
<li>2&#xFF09;set(key,value):&#x5982;&#x679C;key&#x4E0D;&#x5728;cache&#x4E2D;&#xFF0C;&#x5219;&#x5C06;&#x8BE5;(key,value)&#x63D2;&#x5165;cache&#x4E2D;&#xFF08;&#x6CE8;&#x610F;&#xFF0C;&#x5982;&#x679C;cache&#x5DF2;&#x6EE1;&#xFF0C;&#x5219;&#x5FC5;&#x987B;&#x628A;&#x6700;&#x8FD1;&#x6700;&#x4E45;&#x672A;&#x4F7F;&#x7528;&#x7684;&#x5143;&#x7D20;&#x4ECE;cache&#x4E2D;&#x5220;&#x9664;&#xFF09;&#xFF1B;&#x5982;&#x679C;key&#x5728;cache&#x4E2D;&#xFF0C;&#x5219;&#x91CD;&#x7F6E;value&#x7684;&#x503C;&#x3002;</li>
</ul>
</li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">/**
- &#x7528;&#x4E00;&#x4E2A;&#x6570;&#x7EC4;&#x6765;&#x5B58;&#x50A8;&#x6570;&#x636E;&#xFF0C;&#x7ED9;&#x6BCF;&#x4E00;&#x4E2A;&#x6570;&#x636E;&#x9879;&#x6807;&#x8BB0;&#x4E00;&#x4E2A;&#x8BBF;&#x95EE;&#x65F6;&#x95F4;&#x6233;
- &#x6BCF;&#x6B21;&#x63D2;&#x5165;&#x65B0;&#x6570;&#x636E;&#x9879;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5148;&#x628A;&#x6570;&#x7EC4;&#x4E2D;&#x5B58;&#x5728;&#x7684;&#x6570;&#x636E;&#x9879;&#x7684;&#x65F6;&#x95F4;&#x6233;&#x81EA;&#x589E;,&#x5E76;&#x5C06;&#x65B0;&#x6570;&#x636E;&#x9879;&#x7684;&#x65F6;&#x95F4;&#x6233;&#x7F6E;&#x4E3A;0&#x5E76;&#x63D2;&#x5165;&#x5230;&#x6570;&#x7EC4;&#x4E2D;
- &#x6BCF;&#x6B21;&#x8BBF;&#x95EE;&#x6570;&#x7EC4;&#x4E2D;&#x7684;&#x6570;&#x636E;&#x9879;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5C06;&#x88AB;&#x8BBF;&#x95EE;&#x7684;&#x6570;&#x636E;&#x9879;&#x7684;&#x65F6;&#x95F4;&#x6233;&#x7F6E;&#x4E3A;0&#x3002;
- &#x5F53;&#x6570;&#x7EC4;&#x7A7A;&#x95F4;&#x5DF2;&#x6EE1;&#x65F6;&#xFF0C;&#x5C06;&#x65F6;&#x95F4;&#x6233;&#x6700;&#x5927;&#x7684;&#x6570;&#x636E;&#x9879;&#x6DD8;&#x6C70;&#x3002;
*/</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LRUCache</span></span>{
    <span class="hljs-keyword">constructor</span>(capacity) {
        <span class="hljs-keyword">this</span>.capacity=capacity;
        <span class="hljs-keyword">this</span>.members=[];
    }
    put(key,value) {
        <span class="hljs-keyword">let</span> found=<span class="hljs-literal">false</span>;
        <span class="hljs-keyword">let</span> oldestIndex=<span class="hljs-number">-1</span>;
        <span class="hljs-keyword">let</span> oldestAge=<span class="hljs-number">-1</span>;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-keyword">this</span>.members.length;i++){
            <span class="hljs-keyword">let</span> member=<span class="hljs-keyword">this</span>.members[i];
            <span class="hljs-keyword">if</span> (member.age &gt; oldestAge) {
                oldestIndex=i;
                oldestAge=member.age;
            }
            <span class="hljs-keyword">if</span> (member.key==key) {
                <span class="hljs-keyword">this</span>.members[i]={key,value,<span class="hljs-attr">age</span>: <span class="hljs-number">0</span>};
                found=<span class="hljs-literal">true</span>;
            } <span class="hljs-keyword">else</span> {
                member++;
            }
        }
        <span class="hljs-keyword">if</span> (!found) {
            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.members.length&gt;=<span class="hljs-keyword">this</span>.capacity) {
                <span class="hljs-keyword">this</span>.members.splice(oldestIndex,<span class="hljs-number">1</span>);
            }
            <span class="hljs-keyword">this</span>.members[<span class="hljs-keyword">this</span>.members.length]={
                key,
                value,
                <span class="hljs-attr">age</span>:<span class="hljs-number">0</span>
            }
        }
    }
    get(key) {
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-keyword">this</span>.members.length;i++){
            <span class="hljs-keyword">let</span> member=<span class="hljs-keyword">this</span>.members[i];
            <span class="hljs-keyword">if</span> (member.key==key) {
                member.age=<span class="hljs-number">0</span>;
                <span class="hljs-keyword">return</span> member.value;
            }
        }    
        <span class="hljs-keyword">return</span> <span class="hljs-number">-1</span>;
    }
}

<span class="hljs-keyword">let</span> cache=<span class="hljs-keyword">new</span> LRUCache(<span class="hljs-number">3</span>);
cache.put(<span class="hljs-string">&apos;1&apos;</span>,<span class="hljs-number">1</span>);
cache.put(<span class="hljs-string">&apos;2&apos;</span>,<span class="hljs-number">2</span>);
cache.put(<span class="hljs-string">&apos;3&apos;</span>,<span class="hljs-number">3</span>);
<span class="hljs-built_in">console</span>.log(cache.get(<span class="hljs-string">&apos;1&apos;</span>));
<span class="hljs-built_in">console</span>.log(cache.get(<span class="hljs-string">&apos;2&apos;</span>));
<span class="hljs-built_in">console</span>.log(cache.get(<span class="hljs-string">&apos;3&apos;</span>));
cache.put(<span class="hljs-string">&apos;4&apos;</span>,<span class="hljs-number">4</span>);
<span class="hljs-built_in">console</span>.log(cache.get(<span class="hljs-string">&apos;1&apos;</span>));
<span class="hljs-built_in">console</span>.log(cache.get(<span class="hljs-string">&apos;4&apos;</span>));
<span class="hljs-built_in">console</span>.log(cache);
</code></pre>
<h2 id="t456. &#x9002;&#x914D;&#x5668;&#x6A21;&#x5F0F;">6. &#x9002;&#x914D;&#x5668;&#x6A21;&#x5F0F; <a href="#t456. &#x9002;&#x914D;&#x5668;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x65E7;&#x7684;&#x63A5;&#x53E3;&#x548C;&#x4F7F;&#x7528;&#x8005;&#x4E0D;&#x517C;&#x5BB9;</li>
<li>&#x4E2D;&#x95F4;&#x52A0;&#x4E00;&#x4E2A;&#x9002;&#x914D;&#x5668;&#x8F6C;&#x6362;&#x63A5;&#x53E3;</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192757_60d9b4d0_1720749.jpeg" alt="adaptor">
<img src="https://images.gitee.com/uploads/images/2019/0109/192757_4636e2ed_1720749.jpeg" alt="hdmi2vga">
<img src="https://images.gitee.com/uploads/images/2019/0109/192757_6782d834_1720749.jpeg" alt="usbadaptor"></p>
<h4 id="t466.1 &#x7C7B;&#x56FE;">6.1 &#x7C7B;&#x56FE; <a href="#t466.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_7cb9542a_1720749.jpeg" alt="adapter"></p>
<h4 id="t476.2 &#x4EE3;&#x7801;">6.2 &#x4EE3;&#x7801; <a href="#t476.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Power</span></span>{
    charge() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;220V&apos;</span>;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Adapter</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.power=<span class="hljs-keyword">new</span> Power();
    }
    charge() {
        <span class="hljs-keyword">let</span> power=<span class="hljs-keyword">this</span>.power.charge();
        <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${power}</span> =&gt; 12V`</span>;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Client</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.adapter=<span class="hljs-keyword">new</span> Adapter();
    }
    use() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.adapter.charge());
    }
}
<span class="hljs-keyword">new</span> Client().use();

</code></pre>
<h4 id="t486.3 &#x573A;&#x666F;">6.3 &#x573A;&#x666F; <a href="#t486.3 &#x573A;&#x666F;"> # </a></h4>
<h5 id="t496.3.1 &#x63D2;&#x4EF6;&#x9002;&#x914D;">6.3.1 &#x63D2;&#x4EF6;&#x9002;&#x914D; <a href="#t496.3.1 &#x63D2;&#x4EF6;&#x9002;&#x914D;"> # </a></h5>
<ul>
<li>&#x9002;&#x914D;&#x53C2;&#x6570;</li>
<li>&#x9002;&#x914D;&#x540E;&#x7AEF;&#x63A5;&#x53E3;&#x6570;&#x636E;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ajax</span>(<span class="hljs-params">options</span>)</span>{
  <span class="hljs-keyword">let</span> _default = {
      <span class="hljs-attr">method</span>:<span class="hljs-string">&apos;GET&apos;</span>,
      <span class="hljs-attr">dataType</span>:<span class="hljs-string">&apos;json&apos;</span>
  }
  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> attr <span class="hljs-keyword">in</span> options){
    _default[attr] = options[attr]||_default[attr];
  }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">get</span>(<span class="hljs-params">url</span>)</span>{
  <span class="hljs-keyword">let</span> options = {<span class="hljs-attr">method</span>:<span class="hljs-string">&apos;GET&apos;</span>,url};
  ajax(options);
}
</code></pre>
<h5 id="t506.3.1 promisify">6.3.1 promisify <a href="#t506.3.1 promisify"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> fs=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;fs&apos;</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">promisify</span>(<span class="hljs-params">readFile</span>) </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">filename,encoding</span>) </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve,reject</span>) </span>{
            readFile(filename,encoding,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">err,data</span>) </span>{
                <span class="hljs-keyword">if</span> (err)
                    reject(err);
                <span class="hljs-keyword">else</span>
                    resolve(data);
            })
        });
    }
}
<span class="hljs-keyword">let</span> readFile=promisify(fs.readFile);
readFile(<span class="hljs-string">&apos;./1.txt&apos;</span>,<span class="hljs-string">&apos;utf8&apos;</span>).then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> <span class="hljs-built_in">console</span>.log(data));
</code></pre>
<h5 id="t516.3.2 jquery">6.3.2 jquery <a href="#t516.3.2 jquery"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> $=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;jquery&apos;</span>);
$.ajax({
    url,
    <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;POST&apos;</span>,
    <span class="hljs-attr">dataType</span>: <span class="hljs-string">&apos;json&apos;</span>,
    <span class="hljs-attr">data</span>:{<span class="hljs-attr">id</span>:<span class="hljs-number">1</span>}
});

<span class="hljs-keyword">let</span> $={
    ajax(options) {
        fetch(options.url,{
            <span class="hljs-attr">method</span>: options.type,
            <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(options.data)
        })
    }
}
</code></pre>
<h5 id="t526.3.3 computed">6.3.3 computed <a href="#t526.3.3 computed"> # </a></h5>
<pre><code class="lang-js">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;script src=&quot;https://cdn.bootcss.com/vue/2.5.17/vue.js&quot;&gt;&lt;/script&gt;
    &lt;title&gt;vue&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;root&quot;&gt;
&lt;p&gt;{{name}}&lt;/p&gt;
&lt;p&gt;{{upperName}}&lt;/p&gt;
&lt;/div&gt;    
&lt;script&gt;
let vm=new Vue({
    el: &apos;#root&apos;,
    data: {
        name:&apos;zfpx&apos;
    },
    computed: {
        upperName() {
            return this.name.toUpperCase();
        }
    }
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h2 id="t537.&#x88C5;&#x9970;&#x5668;&#x6A21;&#x5F0F;">7.&#x88C5;&#x9970;&#x5668;&#x6A21;&#x5F0F; <a href="#t537.&#x88C5;&#x9970;&#x5668;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x5728;&#x4E0D;&#x6539;&#x53D8;&#x5176;&#x539F;&#x6709;&#x7684;&#x7ED3;&#x6784;&#x548C;&#x529F;&#x80FD;&#x4E3A;&#x5BF9;&#x8C61;&#x6DFB;&#x52A0;&#x65B0;&#x529F;&#x80FD;</li>
<li>&#x88C5;&#x9970;&#x6BD4;&#x7EE7;&#x627F;&#x66F4;&#x52A0;&#x7075;&#x6D3B;</li>
</ul>
<h4 id="t547.1 &#x7C7B;&#x56FE;">7.1 &#x7C7B;&#x56FE; <a href="#t547.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_4ef3d187_1720749.png" alt="decorator"></p>
<h4 id="t557.2 &#x4EE3;&#x7801;">7.2 &#x4EE3;&#x7801; <a href="#t557.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Duck</span></span>{
    eat(food) {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x5403;${food}&apos;</span>);
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TangDuck</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.duck=<span class="hljs-keyword">new</span> Duck();
    }
    eat() {
        <span class="hljs-keyword">this</span>.duck.eat();
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x8C22;&#x8C22;&apos;</span>);
    }
}
</code></pre>
<h4 id="t567.3 &#x5305;&#x88C5;&#x5668;">7.3 &#x5305;&#x88C5;&#x5668; <a href="#t567.3 &#x5305;&#x88C5;&#x5668;"> # </a></h4>
<p>&#x88C5;&#x9970;&#x5668;&#x6A21;&#x5F0F;&#x662F;&#x5C06;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x5D4C;&#x5165;&#x53E6;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x4E4B;&#x4E2D;&#xFF0C;&#x5B9E;&#x9645;&#x4E0A;&#x76F8;&#x5F53;&#x4E8E;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x88AB;&#x53E6;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x5305;&#x88C5;&#x8D77;&#x6765;&#xFF0C;&#x5F62;&#x6210;&#x4E00;&#x6761;&#x5305;&#x88C5;&#x94FE;&#x3002;&#x8BF7;&#x6C42;&#x968F;&#x7740;&#x8FD9;&#x6761;&#x94FE;&#x6761;&#x4F9D;&#x6B21;&#x4F20;&#x9012;&#x5230;&#x6240;&#x6709;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x6BCF;&#x4E2A;&#x5BF9;&#x8C61;&#x6709;&#x5904;&#x7406;&#x8FD9;&#x4E2A;&#x8BF7;&#x6C42;&#x7684;&#x673A;&#x4F1A;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Coffee</span></span>{
  make(water){
    <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${water}</span>+&#x5496;&#x5561;`</span>;
  }
  cost(){
      <span class="hljs-keyword">return</span> <span class="hljs-number">10</span>;
  }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MilkCoffee</span></span>{
    <span class="hljs-keyword">constructor</span>(parent){
        <span class="hljs-keyword">this</span>.parent = parent;
    }
    make(water){
        <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.parent.make(water)}</span>+&#x725B;&#x5976;`</span>;
    }
    cost(){
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.parent.cost()+<span class="hljs-number">1</span>;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SugerCoffee</span></span>{
    <span class="hljs-keyword">constructor</span>(parent){
        <span class="hljs-keyword">this</span>.parent = parent;
    }
    make(water){
        <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.parent.make(water)}</span>+&#x7CD6;`</span>;
    }
    cost(){
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.parent.cost()+<span class="hljs-number">2</span>;
    }
}
<span class="hljs-keyword">let</span> coffee = <span class="hljs-keyword">new</span> Coffee();
<span class="hljs-keyword">let</span> milkCoffee = <span class="hljs-keyword">new</span> MilkCoffee(coffee);
<span class="hljs-keyword">let</span> milksugerCoffee = <span class="hljs-keyword">new</span> SugerCoffee(milkCoffee);
<span class="hljs-built_in">console</span>.log(milksugerCoffee.make(<span class="hljs-string">&apos;&#x6C34;&apos;</span>)+<span class="hljs-string">&apos;=&apos;</span>+milksugerCoffee.cost());
</code></pre>
<h4 id="t577.4 AOP">7.4 AOP <a href="#t577.4 AOP"> # </a></h4>
<ul>
<li>&#x5728;&#x8F6F;&#x4EF6;&#x4E1A;&#xFF0C;AOP&#x4E3A;Aspect Oriented Programming&#x7684;&#x7F29;&#x5199;&#xFF0C;&#x610F;&#x4E3A;&#xFF1A;&#x9762;&#x5411;&#x5207;&#x9762;&#x7F16;&#x7A0B;</li>
<li>&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x9884;&#x7F16;&#x8BD1;&#x65B9;&#x5F0F;&#x548C;&#x8FD0;&#x884C;&#x671F;&#x52A8;&#x6001;&#x4EE3;&#x7406;&#x5B9E;&#x73B0;&#x5728;&#x4E0D;&#x4FEE;&#x6539;&#x6E90;&#x4EE3;&#x7801;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x7ED9;&#x7A0B;&#x5E8F;&#x52A8;&#x6001;&#x7EDF;&#x4E00;&#x6DFB;&#x52A0;&#x529F;&#x80FD;&#x7684;&#x4E00;&#x79CD;&#x6280;&#x672F;</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_281046e5_1720749.jpeg" alt="springaop">
<img src="https://images.gitee.com/uploads/images/2019/0109/192758_c7aedff9_1720749.jpeg" alt="businessaop"></p>
<pre><code class="lang-js"><span class="hljs-built_in">Function</span>.prototype.before = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">beforeFn</span>)</span>{
    <span class="hljs-keyword">let</span> _this = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        beforeFn.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
        <span class="hljs-keyword">return</span> _this.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
    }
}
<span class="hljs-built_in">Function</span>.prototype.after = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">afterFn</span>)</span>{
    <span class="hljs-keyword">let</span> _this = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
         _this.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
        afterFn.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
    }
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">buy</span>(<span class="hljs-params">money,goods</span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x82B1;<span class="hljs-subst">${money}</span>&#x4E70;<span class="hljs-subst">${goods}</span>`</span>);
}
buy = buy.before(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x5411;&#x5AB3;&#x5987;&#x7533;&#x8BF7;1&#x5757;&#x94B1;.`</span>);
});
buy = buy.after(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x628A;&#x5269;&#x4E0B;&#x7684;2&#x6BDB;&#x94B1;&#x8FD8;&#x7ED9;&#x5AB3;&#x5987;.`</span>);
});
buy(<span class="hljs-number">.8</span>,<span class="hljs-string">&apos;&#x76D0;&apos;</span>);
</code></pre>
<h4 id="t587.3 &#x573A;&#x666F;">7.3 &#x573A;&#x666F; <a href="#t587.3 &#x573A;&#x666F;"> # </a></h4>
<h5 id="t597.3.1 &#x57CB;&#x70B9;">7.3.1 &#x57CB;&#x70B9; <a href="#t597.3.1 &#x57CB;&#x70B9;"> # </a></h5>
<p>&#x57CB;&#x70B9;&#x5206;&#x6790;&#xFF0C;&#x662F;&#x7F51;&#x7AD9;&#x5206;&#x6790;&#x7684;&#x4E00;&#x79CD;&#x5E38;&#x7528;&#x7684;&#x6570;&#x636E;&#x91C7;&#x96C6;&#x65B9;&#x6CD5;</p>
<ul>
<li>&#x57CB;&#x70B9;&#x65B9;&#x5F0F;<ul>
<li>&#x670D;&#x52A1;&#x5668;&#x5C42;&#x9762;&#x7684;&#xFF1A;&#x4E3B;&#x8981;&#x662F;&#x901A;&#x8FC7;&#x5BA2;&#x6237;&#x7AEF;&#x7684;&#x8BF7;&#x6C42;&#x8FDB;&#x884C;&#x5206;&#x6790;</li>
<li>&#x5BA2;&#x6237;&#x7AEF;&#x5C42;&#x9762;&#x7684;&#xFF1A;&#x901A;&#x8FC7;&#x57CB;&#x70B9;&#x8FDB;&#x884C;&#x76F8;&#x5E94;&#x7684;&#x5206;&#x6790;<ul>
<li>&#x4EE3;&#x7801;&#x57CB;&#x70B9;</li>
<li>&#x81EA;&#x52A8;&#x5316;&#x57CB;&#x70B9;&#xFF1A;&#x901A;&#x8FC7;AOP&#x601D;&#x60F3;&#x5BF9;&#x76F8;&#x5E94;&#x7684;&#x65B9;&#x6CD5;&#x8FDB;&#x884C;&#x7EDF;&#x8BA1;</li>
<li>&#x7B2C;&#x4E09;&#x65B9;&#x5B9E;&#x73B0; &#x767E;&#x5EA6;&#x3001;&#x53CB;&#x76DF;&#x7B49;...</li>
</ul>
</li>
</ul>
</li>
</ul>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">&quot;&#x897F;&#x74DC;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;watermelon&quot;</span>&gt;</span>&#x897F;&#x74DC;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">&quot;&#x82F9;&#x679C;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;apple&quot;</span>&gt;</span>&#x82F9;&#x679C;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
 <span class="hljs-keyword">let</span> watermelon = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;watermelon&apos;</span>);
 <span class="hljs-keyword">let</span> apple = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;apple&apos;</span>);
 <span class="hljs-built_in">Function</span>.prototype.after = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">afterFn</span>)</span>{
    <span class="hljs-keyword">let</span> _this = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
         _this.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
        afterFn.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
    }
}

 <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">click</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x70B9;&#x51FB;&apos;</span>+<span class="hljs-keyword">this</span>.dataset.name);
 }
 click = click.after(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-keyword">let</span> img = <span class="hljs-keyword">new</span> Image();
     img.src = <span class="hljs-string">`http://localhost:3000?name=<span class="hljs-subst">${<span class="hljs-keyword">this</span>.dataset.name}</span>`</span>;
 });
 <span class="hljs-built_in">Array</span>.from(<span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&apos;button&apos;</span>)).forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">button</span>)</span>{
    button.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,click);
 });
</span></code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> app = express();
app.get(<span class="hljs-string">&apos;/&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
   <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;name&apos;</span>,req.query.name);
   res.end(<span class="hljs-string">&apos;ok&apos;</span>);
});
app.listen(<span class="hljs-number">3000</span>);
</code></pre>
<h5 id="t607.3.2 &#x8868;&#x5355;&#x6821;&#x9A8C;">7.3.2 &#x8868;&#x5355;&#x6821;&#x9A8C; <a href="#t607.3.2 &#x8868;&#x5355;&#x6821;&#x9A8C;"> # </a></h5>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span>
        &#x7528;&#x6237;&#x540D;<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;username&quot;</span>&gt;</span>
        &#x5BC6;&#x7801;<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;password&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;password&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;submit-btn&quot;</span> &gt;</span>&#x63D0;&#x4EA4;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
         <span class="hljs-built_in">Function</span>.prototype.before = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">beforeFn</span>)</span>{
            <span class="hljs-keyword">let</span> _this = <span class="hljs-keyword">this</span>;
            <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                <span class="hljs-keyword">let</span> ret = beforeFn.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
                <span class="hljs-keyword">if</span>(ret)
                _this.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
            }
        }
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">submit</span>(<span class="hljs-params"></span>)</span>{
          alert(<span class="hljs-string">&apos;&#x63D0;&#x4EA4;&#x8868;&#x5355;&apos;</span>);
      }
      submit= submit.before(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">let</span> username = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;username&apos;</span>).value;
          <span class="hljs-keyword">if</span>(username.length&lt;<span class="hljs-number">6</span>){
              <span class="hljs-keyword">return</span> alert(<span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&#x4E0D;&#x80FD;&#x5C11;&#x4E8E;6&#x4F4D;&apos;</span>);
          }
          <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
      });
      submit = submit.before(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">let</span> username = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;username&apos;</span>).value;
          <span class="hljs-keyword">if</span>(!username){
              <span class="hljs-keyword">return</span> alert(<span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&#x4E0D;&#x80FD;&#x4E3A;&#x7A7A;&apos;</span>);
          }
          <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
      });


      <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;submit-btn&apos;</span>).addEventListener(<span class="hljs-string">&apos;click&apos;</span>,submit);
</span></code></pre>
<h5 id="t617.3.3 &#x9632;CSRF&#x653B;&#x51FB;">7.3.3 &#x9632;CSRF&#x653B;&#x51FB; <a href="#t617.3.3 &#x9632;CSRF&#x653B;&#x51FB;"> # </a></h5>
<ul>
<li>CSRF&#x901A;&#x8FC7;&#x4F2A;&#x88C5;&#x6765;&#x81EA;&#x53D7;&#x4FE1;&#x4EFB;&#x7528;&#x6237;&#x7684;&#x8BF7;&#x6C42;&#x6765;&#x5229;&#x7528;&#x53D7;&#x4FE1;&#x4EFB;&#x7684;&#x7F51;&#x7AD9;</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_c0455bf9_1720749.jpeg" alt="csrf.jpg"></p>
<h6 id="t627.3.3.1 &#x53D7;&#x4FE1;&#x4EFB;&#x7F51;&#x7AD9;">7.3.3.1 &#x53D7;&#x4FE1;&#x4EFB;&#x7F51;&#x7AD9; <a href="#t627.3.3.1 &#x53D7;&#x4FE1;&#x4EFB;&#x7F51;&#x7AD9;"> # </a></h6>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> bodyParser = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;body-parser&apos;</span>);
<span class="hljs-keyword">let</span> session = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express-session&apos;</span>);
<span class="hljs-keyword">let</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">let</span> app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({<span class="hljs-attr">extended</span>:<span class="hljs-literal">true</span>}));
app.use(session({
    <span class="hljs-attr">resave</span>:<span class="hljs-literal">true</span>,
    <span class="hljs-attr">secret</span>:<span class="hljs-string">&apos;zfpx&apos;</span>,
    <span class="hljs-attr">saveUninitialized</span>:<span class="hljs-literal">true</span>
}));
app.set(<span class="hljs-string">&apos;view engine&apos;</span>,<span class="hljs-string">&apos;ejs&apos;</span>);
app.set(<span class="hljs-string">&apos;views&apos;</span>,path.resolve(<span class="hljs-string">&apos;views&apos;</span>));
app.engine(<span class="hljs-string">&apos;html&apos;</span>,<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;ejs&apos;</span>).__express);
<span class="hljs-keyword">let</span> users = {};
app.get(<span class="hljs-string">&apos;/login&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
  res.render(<span class="hljs-string">&apos;login.html&apos;</span>);
});
app.post(<span class="hljs-string">&apos;/login&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
    <span class="hljs-keyword">let</span> body = req.body;
    users[body.username] = <span class="hljs-number">100</span>;
    req.session.username = body.username;
    res.json({<span class="hljs-attr">code</span>:<span class="hljs-number">0</span>,<span class="hljs-attr">data</span>:<span class="hljs-string">&apos;&#x767B;&#x5F55;&#x6210;&#x529F;&apos;</span>});
});
app.get(<span class="hljs-string">&apos;/money&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
   res.send(users[req.session.username]+<span class="hljs-string">&quot;&#x5143;&quot;</span>);
});
app.get(<span class="hljs-string">&apos;/withdraw&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
    <span class="hljs-keyword">let</span> token = req.session.token =  <span class="hljs-built_in">Math</span>.random()+<span class="hljs-string">&apos;&apos;</span>;
    res.cookie(<span class="hljs-string">&apos;token&apos;</span>,token);
    res.render(<span class="hljs-string">&apos;withdraw.html&apos;</span>);
});
app.post(<span class="hljs-string">&apos;/withdraw&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
    <span class="hljs-comment">//users[req.session.username] -= (req.body.money?Number(req.body.money):10);</span>
    <span class="hljs-comment">//res.json({code:0,data:&apos;&#x53D6;&#x6B3E;&#x6210;&#x529F;&apos;});</span>
    <span class="hljs-built_in">console</span>.log(req.body.token, req.session.token)
      <span class="hljs-keyword">if</span>(req.body.token== req.session.token){
        users[req.session.username] -= (req.body.money?<span class="hljs-built_in">parseInt</span>(req.body.money):<span class="hljs-number">10</span>);
        res.json({<span class="hljs-attr">code</span>:<span class="hljs-number">0</span>,<span class="hljs-attr">data</span>:<span class="hljs-string">&apos;&#x53D6;&#x6B3E;&#x6210;&#x529F;&apos;</span>});
      }<span class="hljs-keyword">else</span>{
        res.json({<span class="hljs-attr">code</span>:<span class="hljs-number">1</span>,<span class="hljs-attr">data</span>:<span class="hljs-string">&apos;&#x53D6;&#x6B3E;&#x5931;&#x8D25;&apos;</span>});
      } 
});
app.listen(<span class="hljs-number">3000</span>);
</code></pre>
<h6 id="t637.3.3.2 login">7.3.3.2 login <a href="#t637.3.3.2 login"> # </a></h6>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://localhost:3000/money&quot;</span>&gt;</span>&#x67E5;&#x770B;&#x4F59;&#x989D;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://localhost:3000/withdraw&quot;</span>&gt;</span>&#x53D6;&#x6B3E;<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
    &#x7528;&#x6237;&#x540D; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;username&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;login()&quot;</span>&gt;</span>&#x63D0;&#x4EA4;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ajax</span>(<span class="hljs-params">method,url,data</span>)</span>{
            <span class="hljs-keyword">let</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
            xhr.open(method,url,<span class="hljs-literal">true</span>);
            xhr.setRequestHeader(<span class="hljs-string">&apos;Content-Type&apos;</span>,<span class="hljs-string">&apos;application/json&apos;</span>);
            xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                <span class="hljs-keyword">if</span>(xhr.readyState == <span class="hljs-number">4</span> &amp;&amp; xhr.status == <span class="hljs-number">200</span>){
                    <span class="hljs-built_in">console</span>.log(xhr.responseText);
                }
            }
            xhr.send(<span class="hljs-built_in">JSON</span>.stringify(data));
        }
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">login</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">let</span> username = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;username&apos;</span>).value;
            ajax(<span class="hljs-string">&apos;POST&apos;</span>,<span class="hljs-string">&apos;/login&apos;</span>,{username});
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
<h6 id="t647.3.3.3 &#x53D6;&#x6B3E;">7.3.3.3 &#x53D6;&#x6B3E; <a href="#t647.3.3.3 &#x53D6;&#x6B3E;"> # </a></h6>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    &#x91D1;&#x989D; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;money&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;money&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;login()&quot;</span>&gt;</span>&#x63D0;&#x4EA4;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-built_in">Function</span>.prototype.before = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">beforeFn</span>)</span>{
            <span class="hljs-keyword">let</span> _this = <span class="hljs-keyword">this</span>;
            <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                beforeFn.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
                <span class="hljs-keyword">return</span> _this.apply(<span class="hljs-keyword">this</span>,<span class="hljs-built_in">arguments</span>);
            }
        }

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ajax</span>(<span class="hljs-params">method,url,data</span>)</span>{
            <span class="hljs-keyword">let</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
            xhr.open(method,url,<span class="hljs-literal">true</span>);
            xhr.setRequestHeader(<span class="hljs-string">&apos;Content-Type&apos;</span>,<span class="hljs-string">&apos;application/json&apos;</span>);
            xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                <span class="hljs-keyword">if</span>(xhr.readyState == <span class="hljs-number">4</span> &amp;&amp; xhr.status == <span class="hljs-number">200</span>){
                    <span class="hljs-built_in">console</span>.log(xhr.responseText);
                }
            }
            xhr.send(<span class="hljs-built_in">JSON</span>.stringify(data));
        }
        ajax = ajax.before(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">method,url,data</span>)</span>{
            <span class="hljs-keyword">let</span> result = <span class="hljs-built_in">document</span>.cookie.match(<span class="hljs-regexp">/(^|; )token=(.+?)($|; )/</span>);
            <span class="hljs-built_in">console</span>.log(result,result);
            data.token = result[<span class="hljs-number">2</span>];
        });
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">login</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">let</span> money = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;money&apos;</span>).value;
            ajax(<span class="hljs-string">&apos;POST&apos;</span>,<span class="hljs-string">&apos;/withdraw&apos;</span>,{money});
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
<h6 id="t657.3.3.4 &#x975E;&#x4FE1;&#x4EFB;&#x7F51;&#x7AD9;">7.3.3.4 &#x975E;&#x4FE1;&#x4EFB;&#x7F51;&#x7AD9; <a href="#t657.3.3.4 &#x975E;&#x4FE1;&#x4EFB;&#x7F51;&#x7AD9;"> # </a></h6>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">let</span> app = express();
app.set(<span class="hljs-string">&apos;view engine&apos;</span>,<span class="hljs-string">&apos;ejs&apos;</span>);
app.set(<span class="hljs-string">&apos;views&apos;</span>,path.resolve(<span class="hljs-string">&apos;views&apos;</span>));
app.engine(<span class="hljs-string">&apos;html&apos;</span>,<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;ejs&apos;</span>).__express);

app.get(<span class="hljs-string">&apos;/&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
  res.render(<span class="hljs-string">&apos;csrf.html&apos;</span>);
});
app.get(<span class="hljs-string">&apos;/form&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
  res.render(<span class="hljs-string">&apos;form.html&apos;</span>);
});

app.listen(<span class="hljs-number">4000</span>);
</code></pre>
<h6 id="t667.3.3.5 csrf">7.3.3.5 csrf <a href="#t667.3.3.5 csrf"> # </a></h6>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.baidu.com/img/bd_logo1.png&quot;</span>/&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;/form&quot;</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:0;height:0&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
<h6 id="t677.3.3.6 form">7.3.3.6 form <a href="#t677.3.3.6 form"> # </a></h6>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;myform&quot;</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;http://localhost:3000/withdraw&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;POST&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;money&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;money&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;10&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
                setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                   <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;myform&apos;</span>).submit();
                },<span class="hljs-number">100</span>);
            </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
<h5 id="t687.3.4 &#x652F;&#x6301;decorators">7.3.4 &#x652F;&#x6301;decorators <a href="#t687.3.4 &#x652F;&#x6301;decorators"> # </a></h5>
<ul>
<li><a href="https://babeljs.io/docs/en/babel-plugin-proposal-decorators">babel-plugin-proposal-decorators</a><pre><code class="lang-js"><span class="hljs-string">&quot;plugins&quot;</span>: [
  [<span class="hljs-string">&quot;@babel/plugin-proposal-decorators&quot;</span>, { <span class="hljs-string">&quot;legacy&quot;</span>: <span class="hljs-literal">true</span> }],
  [<span class="hljs-string">&quot;@babel/plugin-proposal-class-properties&quot;</span>, { <span class="hljs-string">&quot;loose&quot;</span> : <span class="hljs-literal">true</span> }]
]
</code></pre>
<h5 id="t697.3.5 &#x7C7B;decorators">7.3.5 &#x7C7B;decorators <a href="#t697.3.5 &#x7C7B;decorators"> # </a></h5>
<code>`</code>js
@testable
class Person{</li>
</ul>
<p>}
function testable(target) {
    target.testable=true;
}
console.log(Person.testable);</p>
<pre><code>
```js
let Hooks={
    componentWillMount() {
        console.log(&apos;componentWillMount&apos;);
    },
    componentDidMount() {
        console.log(&apos;componentDidMount&apos;);
    }
}
function mixins(...others) {
    return function (target) {
        Object.assign(target.prototype,...others);
    }
}
@mixins(Hooks)
class Component{

}
let c=new Component();
console.log(c);
</code></pre><h5 id="t707.3.6 &#x65B9;&#x6CD5;decorators">7.3.6 &#x65B9;&#x6CD5;decorators <a href="#t707.3.6 &#x65B9;&#x6CD5;decorators"> # </a></h5>
<ul>
<li><a href="https://www.npmjs.com/package/core-decorators">core-decorators</a></li>
</ul>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">readonly</span>(<span class="hljs-params">target,attr,descriptor</span>) </span>{
    descriptor.writable=<span class="hljs-literal">false</span>;
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Circle</span></span>{
    @readonly
    PI=<span class="hljs-number">3.14</span>;
}
<span class="hljs-keyword">let</span> c=<span class="hljs-keyword">new</span> Circle();
c.PI=<span class="hljs-number">100</span>;
<span class="hljs-built_in">console</span>.log(c.PI)
</code></pre>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">logger</span>(<span class="hljs-params">target,attr,descriptor</span>) </span>{
    <span class="hljs-keyword">let</span> oldVal=descriptor.value;
    descriptor.value=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) </span>{
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x53C2;&#x6570;:<span class="hljs-subst">${args}</span>`</span>);
        <span class="hljs-keyword">return</span> oldVal(...args);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Caculator</span></span>{
    @logger
    sum(a,b) {
        <span class="hljs-keyword">return</span> a+b;
    }
}
<span class="hljs-keyword">let</span> c=<span class="hljs-keyword">new</span> Caculator();
<span class="hljs-keyword">let</span> ret=c.sum(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
<span class="hljs-built_in">console</span>.log(ret);
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> {readonly}=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;core-decorators&apos;</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">deprecate</span>(<span class="hljs-params">msg,options</span>) </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">target,attr,descriptor</span>) </span>{
        <span class="hljs-comment">//DEPRECATION Caculator#sum: This function will be removed in future versions.</span>
        <span class="hljs-keyword">let</span> oldVal=descriptor.value;
        descriptor.value=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) </span>{
            <span class="hljs-keyword">let</span> message=msg? msg:<span class="hljs-string">`DEPRECATION <span class="hljs-subst">${target.constructor.name}</span>#<span class="hljs-subst">${attr}</span>: This function will be removed in future versions.`</span>;
            <span class="hljs-keyword">let</span> see=options&amp;&amp;options.url? <span class="hljs-string">`see <span class="hljs-subst">${options.url}</span>`</span>:<span class="hljs-string">``</span>;
            <span class="hljs-built_in">console</span>.warn(message+<span class="hljs-string">&apos;\r\n&apos;</span>+see);
            <span class="hljs-keyword">return</span> oldVal(...args);
        }
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Caculator</span></span>{
    @readonly PI=<span class="hljs-number">3.14</span>;
    @deprecate
    sum(a,b) {
        <span class="hljs-keyword">return</span> a+b;
    }
    @deprecate(<span class="hljs-string">&apos;stop using this&apos;</span>)
    minus(a,b) {
        <span class="hljs-keyword">return</span> a-b;
    }
    @deprecate(<span class="hljs-string">&apos;stop using this&apos;</span>,{<span class="hljs-attr">url</span>:<span class="hljs-string">&apos;http://www.baidu.com&apos;</span>})
    multiply(a,b) {
        <span class="hljs-keyword">return</span> a*b;
    }
}
<span class="hljs-keyword">let</span> c=<span class="hljs-keyword">new</span> Caculator();
c.PI=<span class="hljs-number">5</span>;
<span class="hljs-built_in">console</span>.log(c.PI);
<span class="hljs-keyword">let</span> ret=c.sum(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
<span class="hljs-built_in">console</span>.log(ret);
<span class="hljs-keyword">let</span> ret2=c.minus(<span class="hljs-number">2</span>,<span class="hljs-number">1</span>);
<span class="hljs-built_in">console</span>.log(ret2);
<span class="hljs-keyword">let</span> ret3=c.multiply(<span class="hljs-number">2</span>,<span class="hljs-number">1</span>);
<span class="hljs-built_in">console</span>.log(ret3);
</code></pre>
<h2 id="t718.&#x4EE3;&#x7406;&#x6A21;&#x5F0F;">8.&#x4EE3;&#x7406;&#x6A21;&#x5F0F; <a href="#t718.&#x4EE3;&#x7406;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x7531;&#x4E8E;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x5F15;&#x7528;&#x53E6;&#x5916;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x6240;&#x4EE5;&#x9700;&#x8981;&#x901A;&#x8FC7;&#x4EE3;&#x7406;&#x5BF9;&#x8C61;&#x5728;&#x8FD9;&#x4E24;&#x4E2A;&#x5BF9;&#x8C61;&#x4E4B;&#x95F4;&#x8D77;&#x5230;&#x4E2D;&#x4ECB;&#x4F5C;&#x7528;</li>
<li>&#x53EF;&#x4EE5;&#x5728;&#x4F7F;&#x7528;&#x8005;&#x548C;&#x76EE;&#x6807;&#x5BF9;&#x8C61;&#x4E4B;&#x95F4;&#x52A0;&#x4E00;&#x4E2A;&#x4EE3;&#x7406;&#x5BF9;&#x8C61;,&#x901A;&#x8FC7;&#x4EE3;&#x7406;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x63A7;&#x5236;</li>
</ul>
<h4 id="t728.1 &#x7C7B;&#x56FE;">8.1 &#x7C7B;&#x56FE; <a href="#t728.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_e26dc7bc_1720749.jpeg" alt="proxy"></p>
<h4 id="t738.2 &#x4EE3;&#x7801;">8.2 &#x4EE3;&#x7801; <a href="#t738.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Goole</span></span>{
    <span class="hljs-keyword">constructor</span>() {    }
    get() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;google&apos;</span>;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Proxy</span> </span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.google=<span class="hljs-keyword">new</span> Goole();
    }
    get() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.google.get();
    }
}
<span class="hljs-keyword">let</span> proxy = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>();
<span class="hljs-keyword">let</span> ret = proxy.get();
<span class="hljs-built_in">console</span>.log(ret);
</code></pre>
<h4 id="t748.3 &#x573A;&#x666F;">8.3 &#x573A;&#x666F; <a href="#t748.3 &#x573A;&#x666F;"> # </a></h4>
<h5 id="t758.3.1 &#x4E8B;&#x4EF6;&#x59D4;&#x6258;">8.3.1 &#x4E8B;&#x4EF6;&#x59D4;&#x6258; <a href="#t758.3.1 &#x4E8B;&#x4EF6;&#x59D4;&#x6258;"> # </a></h5>
<ul>
<li>&#x4E8B;&#x4EF6;&#x6355;&#x83B7;&#x6307;&#x7684;&#x662F;&#x4ECE;document&#x5230;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;&#x7684;&#x90A3;&#x4E2A;&#x8282;&#x70B9;&#xFF0C;&#x5373;&#x81EA;&#x4E0A;&#x800C;&#x4E0B;&#x7684;&#x53BB;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;</li>
<li>&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;&#x662F;&#x81EA;&#x4E0B;&#x800C;&#x4E0A;&#x7684;&#x53BB;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;</li>
<li>&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x65B9;&#x6CD5;&#x7684;&#x7B2C;&#x4E09;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x5C31;&#x662F;&#x63A7;&#x5236;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;&#x987A;&#x5E8F;&#x662F;&#x5426;&#x4E3A;&#x4E8B;&#x4EF6;&#x6355;&#x83B7;&#x3002;true&#x4E3A;&#x4E8B;&#x4EF6;&#x6355;&#x83B7;&#xFF1B;false&#x4E3A;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;,&#x9ED8;&#x8BA4;false&#x3002;</li>
</ul>
<pre><code class="lang-js">&lt;body&gt;
    &lt;ul id=&quot;list&quot;&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
    &lt;/ul&gt;
&lt;script&gt;
  let list = document.querySelector(&apos;#list&apos;);
  list.addEventListener(&apos;click&apos;,event=&gt;{
       alert(event.target.innerHTML);
  });     
&lt;/script&gt;    
&lt;/body&gt;
</code></pre>
<h5 id="t768.3.2 &#x56FE;&#x7247;&#x61D2;&#x52A0;&#x8F7D;">8.3.2 &#x56FE;&#x7247;&#x61D2;&#x52A0;&#x8F7D; <a href="#t768.3.2 &#x56FE;&#x7247;&#x61D2;&#x52A0;&#x8F7D;"> # </a></h5>
<h6 id="t778.3.2.1 app.js">8.3.2.1 app.js <a href="#t778.3.2.1 app.js"> # </a></h6>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>)
<span class="hljs-keyword">let</span> app=express();
app.get(<span class="hljs-string">&apos;/images/loading.gif&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    res.sendFile(path.join(__dirname,req.path));
});
app.get(<span class="hljs-string">&apos;/images/:name&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        res.sendFile(path.join(__dirname,req.path));
    }, <span class="hljs-number">2000</span>);
});
app.get(<span class="hljs-string">&apos;/&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    res.sendFile(path.resolve(<span class="hljs-string">&apos;index.html&apos;</span>));
});
app.listen(<span class="hljs-number">8080</span>);
</code></pre>
<h6 id="t788.3.2.2 index.html">8.3.2.2 index.html <a href="#t788.3.2.2 index.html"> # </a></h6>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
        *{
            <span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span>;
            <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>;
        }
        <span class="hljs-selector-tag">ul</span>,<span class="hljs-selector-tag">li</span>{
            <span class="hljs-attribute">list-style</span>:none;
        }
        <span class="hljs-selector-id">#background</span>{
            <span class="hljs-attribute">position</span>:absolute;
            <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid green;
            <span class="hljs-attribute">right</span>:<span class="hljs-number">10px</span>;
            <span class="hljs-attribute">top</span>:<span class="hljs-number">10px</span>;
        }
        <span class="hljs-selector-id">#background</span> <span class="hljs-selector-tag">li</span>{
            <span class="hljs-attribute">float</span>:left;
            <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">10px</span>;
            <span class="hljs-attribute">text-align</span>:center;
            <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid red;
            <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">5px</span>;
        }
        <span class="hljs-selector-id">#myImage</span>{
            <span class="hljs-attribute">width</span>:<span class="hljs-number">600px</span>;
            <span class="hljs-attribute">height</span>:<span class="hljs-number">400px</span>;
            <span class="hljs-attribute">margin</span>:<span class="hljs-number">100px</span> auto;
        }
        <span class="hljs-selector-id">#myImage</span> <span class="hljs-selector-tag">img</span>{
            <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
            <span class="hljs-attribute">height</span>:<span class="hljs-number">100%</span>;
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;background&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;/images/bg1.jpg&quot;</span>&gt;</span>&#x56FE;&#x7247;1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;/images/bg2.jpg&quot;</span>&gt;</span>&#x56FE;&#x7247;2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;myImage&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
 <span class="hljs-keyword">let</span> container = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#background&apos;</span>);
 <span class="hljs-keyword">let</span> myImage = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#myImage&apos;</span>);
 <span class="hljs-keyword">let</span> Background = (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-keyword">let</span> img = <span class="hljs-keyword">new</span> Image();
     myImage.appendChild(img);
     <span class="hljs-keyword">return</span> {
         set(src){
             img.src = src;
         }
     }
 })();
 <span class="hljs-keyword">let</span> LoadingBackground = (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-keyword">let</span> img = <span class="hljs-keyword">new</span> Image();
     img.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
         Background.set(<span class="hljs-keyword">this</span>.src);
     }
     <span class="hljs-keyword">return</span> {
         set(src){ 
            Background.set(<span class="hljs-string">`/images/loading.gif`</span>);
            img.src = src;
         }
     }
 })();
 container.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
     <span class="hljs-keyword">let</span> src = event.target.dataset.src;
     LoadingBackground.set(src+<span class="hljs-string">&apos;?ts=&apos;</span>+<span class="hljs-built_in">Date</span>.now());
 });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<ul>
<li>&#x66F4;&#x7B26;&#x5408;&#x5355;&#x4E00;&#x804C;&#x8D23;&#x539F;&#x5219;&#x548C;&#x5F00;&#x95ED;&#x539F;&#x5219;</li>
</ul>
<h5 id="t798.3.3 &#x9632;&#x6296;&#x4EE3;&#x7406;">8.3.3 &#x9632;&#x6296;&#x4EE3;&#x7406; <a href="#t798.3.3 &#x9632;&#x6296;&#x4EE3;&#x7406;"> # </a></h5>
<h6 id="t808.3.3.1 todo.html">8.3.3.1 todo.html <a href="#t808.3.3.1 todo.html"> # </a></h6>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;todos&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
    <span class="hljs-keyword">let</span> todos = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#todos&apos;</span>);
    <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        fetch(<span class="hljs-string">&apos;/todos&apos;</span>).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res.json()).then(<span class="hljs-function"><span class="hljs-params">response</span>=&gt;</span>{
            todos.innerHTML = response.map(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span><span class="hljs-string">`&lt;li &quot;&gt;&lt;input value=&quot;<span class="hljs-subst">${item.id}</span>&quot; type=&quot;checkbox&quot; <span class="hljs-subst">${item.completed?<span class="hljs-string">&quot;checked&quot;</span>:<span class="hljs-string">&quot;&quot;</span>}</span>/&gt;<span class="hljs-subst">${item.text}</span>&lt;/li&gt;`</span>).join(<span class="hljs-string">&apos;&apos;</span>);
        });
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toggle</span>(<span class="hljs-params">id</span>)</span>{
       fetch(<span class="hljs-string">`/toggle/<span class="hljs-subst">${id}</span>`</span>).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res.json()).then(<span class="hljs-function"><span class="hljs-params">response</span>=&gt;</span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;response&apos;</span>,response);
        });
    }
    todos.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
        <span class="hljs-keyword">let</span> checkbox = event.target;
        <span class="hljs-keyword">let</span> id = checkbox.value;
        toggle(id);
    });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
<h6 id="t818.3.3.2 todos.html">8.3.3.2 todos.html <a href="#t818.3.3.2 todos.html"> # </a></h6>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;todos&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
    <span class="hljs-keyword">let</span> todos = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;#todos&apos;</span>);
    <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        fetch(<span class="hljs-string">&apos;/todos&apos;</span>).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res.json()).then(<span class="hljs-function"><span class="hljs-params">response</span>=&gt;</span>{
            todos.innerHTML = response.map(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span><span class="hljs-string">`&lt;li &quot;&gt;&lt;input value=&quot;<span class="hljs-subst">${item.id}</span>&quot; type=&quot;checkbox&quot; <span class="hljs-subst">${item.completed?<span class="hljs-string">&quot;checked&quot;</span>:<span class="hljs-string">&quot;&quot;</span>}</span>/&gt;<span class="hljs-subst">${item.text}</span>&lt;/li&gt;`</span>).join(<span class="hljs-string">&apos;&apos;</span>);
        });
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toggle</span>(<span class="hljs-params">id</span>)</span>{
       fetch(<span class="hljs-string">`/toggle/<span class="hljs-subst">${id}</span>`</span>).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res.json()).then(<span class="hljs-function"><span class="hljs-params">response</span>=&gt;</span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;response&apos;</span>,response);
        });
    }
    <span class="hljs-keyword">let</span> LazyToggle = (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">id</span>)</span>{
        <span class="hljs-keyword">let</span> ids = [];
        <span class="hljs-keyword">let</span> timer;
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">id</span>)</span>{
            ids.push(id);
            <span class="hljs-keyword">if</span>(!timer){
              timer = setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                  toggle(ids.join(<span class="hljs-string">&apos;,&apos;</span>));
                  ids = <span class="hljs-literal">null</span>;
                  clearTimeout(timer);
                  timer = <span class="hljs-literal">null</span>;
              },<span class="hljs-number">2000</span>);
            }
        }
    })();
    todos.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
        <span class="hljs-keyword">let</span> checkbox = event.target;
        <span class="hljs-keyword">let</span> id = checkbox.value;
        LazyToggle(id);
    });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h6 id="t828.3.3.3 app.js">8.3.3.3 app.js <a href="#t828.3.3.3 app.js"> # </a></h6>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
app.use(express.static(__dirname));
<span class="hljs-keyword">let</span> todos=[
    {<span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<span class="hljs-attr">text</span>: <span class="hljs-string">&apos;a&apos;</span>,<span class="hljs-attr">completed</span>: <span class="hljs-literal">false</span>},
    {<span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,<span class="hljs-attr">text</span>: <span class="hljs-string">&apos;b&apos;</span>,<span class="hljs-attr">completed</span>: <span class="hljs-literal">false</span>},
    {<span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,<span class="hljs-attr">text</span>: <span class="hljs-string">&apos;c&apos;</span>,<span class="hljs-attr">completed</span>: <span class="hljs-literal">false</span>},
];
app.get(<span class="hljs-string">&apos;/todos&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    res.json(todos);
});
app.get(<span class="hljs-string">&apos;/toggle/:id&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    <span class="hljs-keyword">let</span> id=req.params.id;
    todos = todos.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (item.id==id) {
            item.completed=!item.completed;
        }
        <span class="hljs-keyword">return</span> item;
    });
    res.json({<span class="hljs-attr">code</span>:<span class="hljs-number">0</span>});
});
app.listen(<span class="hljs-number">8080</span>);
</code></pre>
<h6 id="t838.3.3.4 app.js">8.3.3.4 app.js <a href="#t838.3.3.4 app.js"> # </a></h6>
<pre><code class="lang-js">app.get(<span class="hljs-string">&apos;/toggle/:ids&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    <span class="hljs-keyword">let</span> ids=req.params.ids;
    ids=ids.split(<span class="hljs-string">&apos;,&apos;</span>).map(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span><span class="hljs-built_in">parseInt</span>(item));
    todos = todos.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (ids.includes(item.id)) {
            item.completed=!item.completed;
        }
        <span class="hljs-keyword">return</span> item;
    });
    res.json({<span class="hljs-attr">code</span>:<span class="hljs-number">0</span>});
});
</code></pre>
<h5 id="t848.3.4 &#x4EE3;&#x7406;&#x8DE8;&#x57DF;">8.3.4 &#x4EE3;&#x7406;&#x8DE8;&#x57DF; <a href="#t848.3.4 &#x4EE3;&#x7406;&#x8DE8;&#x57DF;"> # </a></h5>
<h6 id="t858.3.4.1 3000.js">8.3.4.1 3000.js <a href="#t858.3.4.1 3000.js"> # </a></h6>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
app.use(express.static(__dirname));
app.listen(<span class="hljs-number">3000</span>);
</code></pre>
<h6 id="t868.3.4.2 4000.js">8.3.4.2 4000.js <a href="#t868.3.4.2 4000.js"> # </a></h6>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
<span class="hljs-keyword">let</span> bodyParser=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;body-parser&apos;</span>);
app.use(bodyParser.urlencoded({<span class="hljs-attr">extended</span>:<span class="hljs-literal">true</span>}));
app.use(express.static(__dirname));
<span class="hljs-keyword">let</span> users=[];
app.post(<span class="hljs-string">&apos;/register&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
    <span class="hljs-keyword">let</span> body=req.body;
    <span class="hljs-keyword">let</span> target=body.target;
    <span class="hljs-keyword">let</span> callback=body.callback;
    <span class="hljs-keyword">let</span> username=body.username;
    <span class="hljs-keyword">let</span> password=body.password;
    <span class="hljs-keyword">let</span> user={username,password};
    <span class="hljs-keyword">let</span> id=users.length==<span class="hljs-number">0</span>? <span class="hljs-number">1</span>:users[users.length<span class="hljs-number">-1</span>].id+<span class="hljs-number">1</span>;
    user.id=id;
    users.push(user);
    res.status(<span class="hljs-number">302</span>);
    res.header(<span class="hljs-string">&apos;Location&apos;</span>,<span class="hljs-string">`<span class="hljs-subst">${target}</span>?callback=<span class="hljs-subst">${callback}</span>&amp;args=<span class="hljs-subst">${id}</span>`</span>);
    res.end();
});
app.listen(<span class="hljs-number">4000</span>);
</code></pre>
<h6 id="t878.3.4.3 index.html">8.3.4.3 index.html <a href="#t878.3.4.3 index.html"> # </a></h6>
<pre><code class="lang-js">&lt;script type=&quot;text/javascript&quot;&gt;
  function receiveId(data){
      alert(&apos;&#x7528;&#x6237;ID=&apos;+data);
  }
&lt;/script&gt;
&lt;iframe name=&quot;proxyIframe&quot; id=&quot;proxyIframe&quot;  frameborder=&quot;0&quot; &gt;&lt;/iframe&gt;
&lt;form action=&quot;http://localhost:4000/register&quot; method=&quot;POST&quot; target=&quot;proxyIframe&quot;&gt;
   &lt;input type=&quot;hidden&quot; name=&quot;callback&quot; value=&quot;receiveId&quot;&gt;
     &lt;input type=&quot;hidden&quot; name=&quot;target&quot; value=&quot;http://localhost:3000/target.html&quot;&gt;
     &#x7528;&#x6237;&#x540D;&lt;input type=&quot;text&quot; name=&quot;username&quot;/&gt;
     &#x5BC6;&#x7801;&lt;input type=&quot;text&quot; name=&quot;password&quot;/&gt;
     &lt;input type=&quot;submit&quot; value=&quot;&#x63D0;&#x4EA4;&quot;&gt;
&lt;/form&gt;
</code></pre>
<h6 id="t888.3.4.4 target.html">8.3.4.4 target.html <a href="#t888.3.4.4 target.html"> # </a></h6>
<pre><code class="lang-js"><span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">var</span> query = location.search.substr(<span class="hljs-number">1</span>).split(<span class="hljs-string">&apos;&amp;&apos;</span>);
        <span class="hljs-keyword">let</span> fn,args;
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>,len=query.length;i&lt;len;i++){
            <span class="hljs-keyword">let</span> item = query[i].split(<span class="hljs-string">&apos;=&apos;</span>);
            <span class="hljs-keyword">if</span>(item[<span class="hljs-number">0</span>]==<span class="hljs-string">&apos;callback&apos;</span>){
                fn = item[<span class="hljs-number">1</span>];
            }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(item[<span class="hljs-number">0</span>] == <span class="hljs-string">&apos;args&apos;</span>){
                args = item[<span class="hljs-number">1</span>];
            }
        }
        <span class="hljs-keyword">try</span>{
            <span class="hljs-built_in">eval</span>(<span class="hljs-string">`top.<span class="hljs-subst">${fn}</span>(&apos;<span class="hljs-subst">${args}</span>&apos;)`</span>);
        }<span class="hljs-keyword">catch</span>(e){}
    }
</code></pre>
<h5 id="t898.3.5 &#x4EE3;&#x7406;&#x7F13;&#x5B58;">8.3.5 &#x4EE3;&#x7406;&#x7F13;&#x5B58; <a href="#t898.3.5 &#x4EE3;&#x7406;&#x7F13;&#x5B58;"> # </a></h5>
<p>&#x7F13;&#x5B58;&#x4EE3;&#x7406;&#x53EF;&#x4EE5;&#x4E3A;&#x5F00;&#x9500;&#x5927;&#x7684;&#x8BA1;&#x7B97;&#x7ED3;&#x679C;&#x63D0;&#x4F9B;&#x6682;&#x65F6;&#x7684;&#x5B58;&#x50A8;</p>
<pre><code class="lang-js"><span class="hljs-number">0</span>!=<span class="hljs-number">1</span>&#xFF0C;n!=(n<span class="hljs-number">-1</span>)!&#xD7;n
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> m = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">n</span>) </span>{
    <span class="hljs-keyword">if</span> (n&lt;=<span class="hljs-number">1</span>) {
        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">return</span> n*m(n<span class="hljs-number">-1</span>);
    }
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params">n</span>) </span>{
    <span class="hljs-keyword">let</span> result=<span class="hljs-number">0</span>;
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">1</span>;i&lt;=n;i++){
        result+=m(i);
    }
    <span class="hljs-keyword">return</span> result;
}
<span class="hljs-built_in">console</span>.log(sum(<span class="hljs-number">4</span>));
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> m = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">n</span>) </span>{
    <span class="hljs-keyword">if</span> (n&lt;=<span class="hljs-number">1</span>) {
        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-keyword">return</span> n*m(n<span class="hljs-number">-1</span>);
    }
}
<span class="hljs-keyword">let</span> sum=(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">let</span> cache={};
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sum</span>(<span class="hljs-params">n</span>) </span>{
        <span class="hljs-keyword">let</span> result=<span class="hljs-number">0</span>;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">1</span>;i&lt;=n;i++){
            <span class="hljs-keyword">let</span> r=cache[i];
            <span class="hljs-keyword">if</span> (r) {
                result+=r;
            } <span class="hljs-keyword">else</span> {
                r=m(i);
                cache[i]=r;
                result+=r;
            }
        }
        <span class="hljs-keyword">return</span> result;
    }
})()

<span class="hljs-built_in">console</span>.log(sum(<span class="hljs-number">4</span>));
</code></pre>
<h5 id="t908.3.5 $.proxy">8.3.5 $.proxy <a href="#t908.3.5 $.proxy"> # </a></h5>
<ul>
<li>&#x63A5;&#x53D7;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x7136;&#x540E;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x65B0;&#x51FD;&#x6570;&#xFF0C;&#x5E76;&#x4E14;&#x8FD9;&#x4E2A;&#x65B0;&#x51FD;&#x6570;&#x59CB;&#x7EC8;&#x4FDD;&#x6301;&#x4E86;&#x7279;&#x5B9A;&#x7684;&#x4E0A;&#x4E0B;&#x6587;&#x8BED;&#x5883;&#x3002;</li>
<li>jQuery.proxy( function, context ) function&#x4E3A;&#x6267;&#x884C;&#x7684;&#x51FD;&#x6570;&#xFF0C;content&#x4E3A;&#x51FD;&#x6570;&#x7684;&#x4E0A;&#x4E0B;&#x6587;this&#x503C;&#x4F1A;&#x88AB;&#x8BBE;&#x7F6E;&#x6210;&#x8FD9;&#x4E2A;object&#x5BF9;&#x8C61;</li>
</ul>
<pre><code class="lang-js">&lt;script src=<span class="hljs-string">&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
&lt;script&gt;
   <span class="hljs-keyword">let</span> btn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;btn&apos;</span>);
   btn.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
       setTimeout($.proxy((<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
           $(<span class="hljs-keyword">this</span>).css(<span class="hljs-string">&apos;color&apos;</span>,<span class="hljs-string">&apos;red&apos;</span>);
       }),<span class="hljs-keyword">this</span>),<span class="hljs-number">1000</span>);
   });    
<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>    
</code></pre>
<h5 id="t918.3.6 Proxy">8.3.6 Proxy <a href="#t918.3.6 Proxy"> # </a></h5>
<ul>
<li>Proxy &#x7528;&#x4E8E;&#x4FEE;&#x6539;&#x67D0;&#x4E9B;&#x64CD;&#x4F5C;&#x7684;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;</li>
<li>Proxy &#x53EF;&#x4EE5;&#x7406;&#x89E3;&#x6210;&#xFF0C;&#x5728;&#x76EE;&#x6807;&#x5BF9;&#x8C61;&#x4E4B;&#x524D;&#x67B6;&#x8BBE;&#x4E00;&#x5C42;&#x201C;&#x62E6;&#x622A;&#x201D;&#xFF0C;&#x5916;&#x754C;&#x5BF9;&#x8BE5;&#x5BF9;&#x8C61;&#x7684;&#x8BBF;&#x95EE;&#xFF0C;&#x90FD;&#x5FC5;&#x987B;&#x5148;&#x901A;&#x8FC7;&#x8FD9;&#x5C42;&#x62E6;&#x622A;&#xFF0C;&#x56E0;&#x6B64;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x79CD;&#x673A;&#x5236;&#xFF0C;&#x53EF;&#x4EE5;&#x5BF9;&#x5916;&#x754C;&#x7684;&#x8BBF;&#x95EE;&#x8FDB;&#x884C;&#x8FC7;&#x6EE4;&#x548C;&#x6539;&#x5199;&#x3002;Proxy &#x8FD9;&#x4E2A;&#x8BCD;&#x7684;&#x539F;&#x610F;&#x662F;&#x4EE3;&#x7406;&#xFF0C;&#x7528;&#x5728;&#x8FD9;&#x91CC;&#x8868;&#x793A;&#x7531;&#x5B83;&#x6765;&#x201C;&#x4EE3;&#x7406;&#x201D;&#x67D0;&#x4E9B;&#x64CD;&#x4F5C;&#xFF0C;&#x53EF;&#x4EE5;&#x8BD1;&#x4E3A;&#x201C;&#x4EE3;&#x7406;&#x5668;&#x201D;&#x3002;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> wang={
    <span class="hljs-attr">name</span>: <span class="hljs-string">&apos;wangy&apos;</span>,
    <span class="hljs-attr">age</span>: <span class="hljs-number">29</span>,
    <span class="hljs-attr">height</span>:<span class="hljs-number">165</span>
}
<span class="hljs-keyword">let</span> wangMama=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Proxy</span>(wang,{
    get(target,key) {
        <span class="hljs-keyword">if</span> (key == <span class="hljs-string">&apos;age&apos;</span>) {
            <span class="hljs-keyword">return</span> wang.age<span class="hljs-number">-1</span>;
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (key == <span class="hljs-string">&apos;height&apos;</span>) {
            <span class="hljs-keyword">return</span> wang.height+<span class="hljs-number">5</span>;
        }
        <span class="hljs-keyword">return</span> target[key];
    },
    set(target,key,val) {
        <span class="hljs-keyword">if</span> (key == <span class="hljs-string">&apos;boyfriend&apos;</span>) {
            <span class="hljs-keyword">let</span> boyfriend=val;
            <span class="hljs-keyword">if</span> (boyfriend.age&gt;<span class="hljs-number">40</span>) {
                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">&apos;&#x592A;&#x8001;&apos;</span>);
            } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (boyfriend.salary&lt;<span class="hljs-number">20000</span>) {
                <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">&apos;&#x592A;&#x7A77;&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                target[key]=val;
                <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
            }
        }
    }
});
<span class="hljs-built_in">console</span>.log(wangMama.age);
<span class="hljs-built_in">console</span>.log(wangMama.height);
wangMama.boyfriend={
    <span class="hljs-attr">age</span>: <span class="hljs-number">41</span>,
    <span class="hljs-attr">salary</span>:<span class="hljs-number">3000</span>
}
</code></pre>
<ul>
<li>&#x4EE3;&#x7406;&#x6A21;&#x5F0F; VS &#x9002;&#x914D;&#x5668;&#x6A21;&#x5F0F; &#x9002;&#x914D;&#x5668;&#x63D0;&#x4F9B;&#x4E0D;&#x540C;&#x63A5;&#x53E3;&#xFF0C;&#x4EE3;&#x7406;&#x6A21;&#x5F0F;&#x63D0;&#x4F9B;&#x4E00;&#x6A21;&#x4E00;&#x6837;&#x7684;&#x63A5;&#x53E3;</li>
<li>&#x4EE3;&#x7406;&#x6A21;&#x5F0F; VS &#x88C5;&#x9970;&#x5668;&#x6A21;&#x5F0F; &#x88C5;&#x9970;&#x5668;&#x6A21;&#x5F0F;&#x539F;&#x6765;&#x7684;&#x529F;&#x80FD;&#x4E0D;&#x53D8;&#x8FD8;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#xFF0C;&#x4EE3;&#x7406;&#x6A21;&#x5F0F;&#x6539;&#x53D8;&#x539F;&#x6765;&#x7684;&#x529F;&#x80FD;</li>
</ul>
<h2 id="t929. &#x5916;&#x89C2;&#x6A21;&#x5F0F;">9. &#x5916;&#x89C2;&#x6A21;&#x5F0F; <a href="#t929. &#x5916;&#x89C2;&#x6A21;&#x5F0F;"> # </a></h2>
<p>&#x8BE5;&#x6A21;&#x5F0F;&#x5C31;&#x662F;&#x628A;&#x4E00;&#x4E9B;&#x590D;&#x6742;&#x7684;&#x6D41;&#x7A0B;&#x5C01;&#x88C5;&#x6210;&#x4E00;&#x4E2A;&#x63A5;&#x53E3;&#x4F9B;&#x7ED9;&#x5916;&#x90E8;&#x7528;&#x6237;&#x66F4;&#x7B80;&#x5355;&#x7684;&#x4F7F;&#x7528;</p>
<ul>
<li>&#x95E8;&#x9762;&#x89D2;&#x8272;&#xFF1A;&#x5916;&#x89C2;&#x6A21;&#x5F0F;&#x7684;&#x6838;&#x5FC3;&#x3002;&#x5B83;&#x88AB;&#x5BA2;&#x6237;&#x89D2;&#x8272;&#x8C03;&#x7528;&#xFF0C;&#x5B83;&#x719F;&#x6089;&#x5B50;&#x7CFB;&#x7EDF;&#x7684;&#x529F;&#x80FD;&#x3002;&#x5185;&#x90E8;&#x6839;&#x636E;&#x5BA2;&#x6237;&#x89D2;&#x8272;&#x7684;&#x9700;&#x6C42;&#x9884;&#x5B9A;&#x4E86;&#x51E0;&#x79CD;&#x529F;&#x80FD;&#x7684;&#x7EC4;&#x5408;</li>
<li>&#x5B50;&#x7CFB;&#x7EDF;&#x89D2;&#x8272;:&#x5B9E;&#x73B0;&#x4E86;&#x5B50;&#x7CFB;&#x7EDF;&#x7684;&#x529F;&#x80FD;&#x3002;&#x5B83;&#x5BF9;&#x5BA2;&#x6237;&#x89D2;&#x8272;&#x548C;Facade&#x65F6;&#x672A;&#x77E5;&#x7684;</li>
<li>&#x5BA2;&#x6237;&#x89D2;&#x8272;:&#x901A;&#x8FC7;&#x8C03;&#x7528;Facede&#x6765;&#x5B8C;&#x6210;&#x8981;&#x5B9E;&#x73B0;&#x7684;&#x529F;&#x80FD;</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_281c9c59_1720749.jpeg" alt="facade22"></p>
<h4 id="t939.1 &#x7C7B;&#x56FE;">9.1 &#x7C7B;&#x56FE; <a href="#t939.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_519053fe_1720749.jpeg" alt="facade"></p>
<h4 id="t949.2 &#x4EE3;&#x7801;">9.2 &#x4EE3;&#x7801; <a href="#t949.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Sum</span></span>{
    sum(a,b) {
        <span class="hljs-keyword">return</span> a+b;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Minus</span></span>{
    minus(a,b) {
        <span class="hljs-keyword">return</span> a-b;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Multiply</span></span>{
    multiply(a,b) {
        <span class="hljs-keyword">return</span> a * b;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Calculator</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.sumObj=<span class="hljs-keyword">new</span> Sum();
        <span class="hljs-keyword">this</span>.minusObj=<span class="hljs-keyword">new</span> Minus();
        <span class="hljs-keyword">this</span>.multiplyObj=<span class="hljs-keyword">new</span> Multiply();
    }
    sum(...args) {
        <span class="hljs-keyword">this</span>.sumObj.sum(...args);
    }
    minus(...args) {
        <span class="hljs-keyword">this</span>.minusObj.minus(...args);
    }
    multiply(...args) {
        <span class="hljs-keyword">this</span>.multiplyObj.multiply(...args);
    }
}
<span class="hljs-keyword">let</span> calculator=<span class="hljs-keyword">new</span> Calculator();
calculator.sum(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
calculator.minus(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
calculator.multiply(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);
</code></pre>
<h4 id="t959.3 &#x4EE3;&#x7801;">9.3 &#x4EE3;&#x7801; <a href="#t959.3 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js">
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CPU</span></span>{
    start() {<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x6253;&#x5F00;CPU&apos;</span>);}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Memory</span></span>{
    start() {<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x6253;&#x5F00;&#x5185;&#x5B58;&apos;</span>);}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Disk</span></span>{
    start() {<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x6253;&#x5F00;&#x786C;&#x76D8;&apos;</span>);}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Computer</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.cpu=<span class="hljs-keyword">new</span> CPU();
        <span class="hljs-keyword">this</span>.memory=<span class="hljs-keyword">new</span> Memory();
        <span class="hljs-keyword">this</span>.disk=<span class="hljs-keyword">new</span> Disk();
    }
    start() {
        <span class="hljs-keyword">this</span>.cpu.start();
        <span class="hljs-keyword">this</span>.memory.start();
        <span class="hljs-keyword">this</span>.disk.start();
    }
}
<span class="hljs-keyword">new</span> Computer().start();
</code></pre>
<h4 id="t969.3 &#x573A;&#x666F;">9.3 &#x573A;&#x666F; <a href="#t969.3 &#x573A;&#x666F;"> # </a></h4>
<ul>
<li>&#x4E3A;&#x590D;&#x6742;&#x7684;&#x6A21;&#x5757;&#x6216;&#x5B50;&#x7CFB;&#x7EDF;&#x63D0;&#x4F9B;&#x5916;&#x754C;&#x8BBF;&#x95EE;&#x7684;&#x6A21;&#x5757;</li>
<li>&#x5B50;&#x7CFB;&#x7EDF;&#x76F8;&#x4E92;&#x72EC;&#x7ACB;</li>
</ul>
<h5 id="t979.3.1 redux">9.3.1 redux <a href="#t979.3.1 redux"> # </a></h5>
<ul>
<li><a href="https://github.com/reduxjs/redux/blob/master/src/index.js">redux</a></li>
</ul>
<h2 id="t9810.&#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;">10.&#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F; <a href="#t9810.&#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x88AB;&#x89C2;&#x5BDF;&#x8005;&#x4F9B;&#x7EF4;&#x62A4;&#x89C2;&#x5BDF;&#x8005;&#x7684;&#x4E00;&#x7CFB;&#x5217;&#x65B9;&#x6CD5;</li>
<li>&#x89C2;&#x5BDF;&#x8005;&#x63D0;&#x4F9B;&#x66F4;&#x65B0;&#x63A5;&#x53E3;</li>
<li>&#x89C2;&#x5BDF;&#x8005;&#x628A;&#x81EA;&#x5DF1;&#x6CE8;&#x518C;&#x5230;&#x88AB;&#x89C2;&#x5BDF;&#x8005;&#x91CC;</li>
<li>&#x5728;&#x88AB;&#x89C2;&#x5BDF;&#x8005;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x65F6;&#x5019;&#xFF0C;&#x8C03;&#x7528;&#x89C2;&#x5BDF;&#x8005;&#x7684;&#x66F4;&#x65B0;&#x65B9;&#x6CD5;</li>
</ul>
<h4 id="t9910.1 &#x7C7B;&#x56FE;">10.1 &#x7C7B;&#x56FE; <a href="#t9910.1 &#x7C7B;&#x56FE;"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_7fdaa324_1720749.jpeg" alt="observer"></p>
<h4 id="t10010.2 &#x4EE3;&#x7801;">10.2 &#x4EE3;&#x7801; <a href="#t10010.2 &#x4EE3;&#x7801;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Star</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">this</span>.name=name;
        <span class="hljs-keyword">this</span>.state=<span class="hljs-string">&apos;&apos;</span>;
        <span class="hljs-keyword">this</span>.observers=[];
    }
    getState() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state;
    }
    setState(state) {
        <span class="hljs-keyword">this</span>.state=state;
        <span class="hljs-keyword">this</span>.notifyAllObservers();
    }
    attach(observer) {
        <span class="hljs-keyword">this</span>.observers.push(observer);
    }
    notifyAllObservers() {
        <span class="hljs-keyword">this</span>.observers.forEach(<span class="hljs-function"><span class="hljs-params">observer</span>=&gt;</span>observer.update());
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Fan</span></span>{
    <span class="hljs-keyword">constructor</span>(name,subject) {
        <span class="hljs-keyword">this</span>.name=name;
        <span class="hljs-keyword">this</span>.subject=subject;
        <span class="hljs-keyword">this</span>.subject.attach(<span class="hljs-keyword">this</span>);
    }
    update() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.subject.name}</span>&#x6709;&#x65B0;&#x7684;&#x72B6;&#x6001;-<span class="hljs-subst">${<span class="hljs-keyword">this</span>.subject.getState()}</span>,<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span>&#x6B63;&#x5728;&#x66F4;&#x65B0;`</span>);    
    }
}
<span class="hljs-keyword">let</span> star=<span class="hljs-keyword">new</span> Star(<span class="hljs-string">&apos;&#x8D75;&#x4E3D;&#x9896;&apos;</span>);
<span class="hljs-keyword">let</span> fan1=<span class="hljs-keyword">new</span> Fan(<span class="hljs-string">&apos;&#x59DC;&#x8001;&#x5E08;&apos;</span>,star);
star.setState(<span class="hljs-string">&apos;&#x7ED3;&#x5A5A;&apos;</span>);
</code></pre>
<h4 id="t10110.3 &#x573A;&#x666F;">10.3 &#x573A;&#x666F; <a href="#t10110.3 &#x573A;&#x666F;"> # </a></h4>
<h5 id="t10210.3.1 &#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;">10.3.1 &#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A; <a href="#t10210.3.1 &#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;"> # </a></h5>
<pre><code class="lang-js">    &lt;button id=&quot;btn&quot;&gt;click&lt;/button&gt;
    &lt;script&gt;
        let btn = document.getElementById(&apos;btn&apos;);
        btn.addEventListener(&apos;click&apos;,()=&gt;{alert(1)});
        btn.addEventListener(&apos;click&apos;,()=&gt;{alert(2)});
        btn.addEventListener(&apos;click&apos;,()=&gt;{alert(3)});
    &lt;/script&gt;
</code></pre>
<h5 id="t10310.3.2 Promise">10.3.2 Promise <a href="#t10310.3.2 Promise"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Promise</span></span>{
    <span class="hljs-keyword">constructor</span>(fn) {
        <span class="hljs-keyword">this</span>.callbacks=[];
        <span class="hljs-keyword">let</span> resolve=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
            <span class="hljs-keyword">this</span>.callbacks.forEach(<span class="hljs-function"><span class="hljs-params">callback</span> =&gt;</span> callback())
        };
        fn(resolve);
    }
    then(callback) {
        <span class="hljs-keyword">this</span>.callbacks.push(callback);
    }
}
<span class="hljs-keyword">let</span> promise=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve,reject</span>) </span>{
    setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        resolve(<span class="hljs-number">100</span>);
    },<span class="hljs-number">1000</span>);
});
promise.then(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>));
promise.then(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span>));
</code></pre>
<h5 id="t10410.3.3 callbacks">10.3.3 callbacks <a href="#t10410.3.3 callbacks"> # </a></h5>
<ul>
<li>JQuery.Callbacks&#x662F;jQuery1.7+&#x4E4B;&#x540E;&#x5F15;&#x5165;&#x7684;&#xFF0C;&#x7528;&#x6765;&#x8FDB;&#x884C;&#x51FD;&#x6570;&#x961F;&#x5217;&#x7684;add&#x3001;remove&#x3001;fire&#x3001;lock&#x7B49;&#x64CD;&#x4F5C;</li>
<li>&#x5E76;&#x63D0;&#x4F9B;once&#x3001;memory&#x3001;unique&#x3001;stopOnFalse&#x56DB;&#x4E2A;option&#x8FDB;&#x884C;&#x4E00;&#x4E9B;&#x7279;&#x6B8A;&#x7684;&#x63A7;&#x5236;&#x3002;</li>
<li>Callbacks&#x5BF9;&#x8C61;&#x5176;&#x5B9E;&#x5C31;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#x961F;&#x5217;&#xFF0C;&#x83B7;&#x5F97;Callbacks&#x5BF9;&#x8C61;&#x4E4B;&#x540E; &#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x5411;&#x8FD9;&#x4E2A;&#x96C6;&#x5408;&#x4E2D;&#x589E;&#x52A0;&#x6216;&#x8005;&#x5220;&#x9664;&#x51FD;&#x6570;&#x3002;add&#x548C;remove&#x529F;&#x80FD;&#x76F8;&#x53CD;&#xFF0C;&#x51FD;&#x6570;&#x53C2;&#x6570;&#x662F;&#x76F8;&#x540C;&#x7684;&#xFF0C;empty()&#x5220;&#x9664;&#x56DE;&#x8C03;&#x5217;&#x8868;&#x4E2D;&#x7684;&#x6240;&#x6709;&#x51FD;&#x6570;</li>
</ul>
<pre><code class="lang-js">&lt;script src=<span class="hljs-string">&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
&lt;script&gt;
 <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Callbacks</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-keyword">let</span> observers = [];
     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">observer</span>)</span>{
         observers.push(observer);
     }
     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">remove</span>(<span class="hljs-params">observer</span>)</span>{
         <span class="hljs-keyword">let</span> index = observers.indexOf(observer);
         <span class="hljs-keyword">if</span>(index != <span class="hljs-number">-1</span>)
           observers.splice(index,<span class="hljs-number">1</span>);
     }
     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fire</span>(<span class="hljs-params"></span>)</span>{
         observers.forEach(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item());
     }
     <span class="hljs-keyword">return</span> {
         add,
         remove,
         fire
     }
 }
 <span class="hljs-keyword">let</span> callbacks = Callbacks();

 <span class="hljs-keyword">let</span> a1= <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>alert(<span class="hljs-number">1</span>);
 <span class="hljs-keyword">let</span> a2= <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>alert(<span class="hljs-number">2</span>);
 <span class="hljs-keyword">let</span> a3= <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>alert(<span class="hljs-number">13</span>);
 callbacks.add(a1);
 callbacks.add(a2);
 callbacks.add(a3);
 callbacks.remove(a3);
 callbacks.fire();
<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
</code></pre>
<h5 id="t10510.3.4 events">10.3.4 events <a href="#t10510.3.4 events"> # </a></h5>
<p>&#x81EA;&#x5B9A;&#x4E49;&#x4E8B;&#x4EF6;</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> EventEmitter=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./events&apos;</span>);
<span class="hljs-keyword">let</span> subject=<span class="hljs-keyword">new</span> EventEmitter();
subject.on(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name</span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>,name);
});
subject.on(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name</span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-number">2</span>,name);
});
subject.emit(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-string">&apos;zfpx&apos;</span>);
</code></pre>
<p>events.js</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">EventEmitter</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>._events={};
    }
    on(type,listener) {
        <span class="hljs-keyword">let</span> listeners=<span class="hljs-keyword">this</span>._events[type];
        <span class="hljs-keyword">if</span> (listeners) {
            listeners.push(listener);
        } <span class="hljs-keyword">else</span> {
            <span class="hljs-keyword">this</span>._events[type]=[listener];
        }
    }
    emit(type) {
        <span class="hljs-keyword">let</span> listeners=<span class="hljs-keyword">this</span>._events[type];
        <span class="hljs-keyword">let</span> args=<span class="hljs-built_in">Array</span>.from(<span class="hljs-built_in">arguments</span>).slice(<span class="hljs-number">1</span>);
        listeners.forEach(<span class="hljs-function"><span class="hljs-params">listener</span> =&gt;</span> listener(...args));
    }
}
<span class="hljs-built_in">module</span>.exports = EventEmitter;
</code></pre>
<h5 id="t10610.3.5 &#x6D41;">10.3.5 &#x6D41; <a href="#t10610.3.5 &#x6D41;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> fs=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;fs&apos;</span>);
<span class="hljs-keyword">let</span> rs=fs.createReadStream(<span class="hljs-string">&apos;./1.txt&apos;</span>);
rs.on(<span class="hljs-string">&apos;data&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
    <span class="hljs-built_in">console</span>.log(data)
});
rs.on(<span class="hljs-string">&apos;end&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;end&apos;</span>)
});
</code></pre>
<h5 id="t10710.3.6 http&#x670D;&#x52A1;&#x5668;">10.3.6 http&#x670D;&#x52A1;&#x5668; <a href="#t10710.3.6 http&#x670D;&#x52A1;&#x5668;"> # </a></h5>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> http=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;http&apos;</span>);
<span class="hljs-keyword">let</span> server = http.createServer();
server.on(<span class="hljs-string">&apos;request&apos;</span>,(req,res)=&gt;{
  req.on(<span class="hljs-string">&apos;data&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
      <span class="hljs-built_in">console</span>.log(data)
  });
}));
</code></pre>
<h5 id="t10810.3.7 &#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;">10.3.7 &#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570; <a href="#t10810.3.7 &#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;"> # </a></h5>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_ff6d2630_1720749.jpeg" alt="reactlifecycle"></p>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_ac466dd3_1720749.jpeg" alt="vuelifecycle"></p>
<h5 id="t10910.3.8 vue watch">10.3.8 vue watch <a href="#t10910.3.8 vue watch"> # </a></h5>
<pre><code class="lang-js">&lt;body&gt;
&lt;div id=&quot;root&quot;&gt;
      &lt;p&gt;FullName: {{fullName}}&lt;/p&gt;
      &lt;p&gt;FirstName: &lt;input type=&quot;text&quot; v-model=&quot;firstName&quot;/&gt;&lt;/p&gt;
      &lt;p&gt;LastName: &lt;input type=&quot;text&quot; v-model=&quot;lastName&quot;/&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
new Vue({
  el:&apos;#root&apos;,
  data: {
    firstName:&apos;&#x5F20;&apos;,
    lastName: &apos;&#x4E09;&apos;,
    fullName:&apos;&#x5F20;&#x4E09;&apos;
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + &apos; &apos; + this.lastName;
    }
  } 
})
&lt;/script&gt;
</code></pre>
<h5 id="t11010.3.9 redux">10.3.9 redux <a href="#t11010.3.9 redux"> # </a></h5>
<ul>
<li><a href="https://github.com/reduxjs/redux/blob/master/src/createStore.js">createStore</a>
<code>`</code>js
/**<ul>
<li>&#x521B;&#x5EFA;&#x4E00;&#x4E2A;Redux&#x4ED3;&#x5E93;&#x6765;&#x4FDD;&#x5B58;&#x6574;&#x4E2A;&#x72B6;&#x6001;&#x6811;</li>
<li>&#x6539;&#x53D8;&#x72B6;&#x6001;&#x6811;&#x7684;&#x552F;&#x4E00;&#x65B9;&#x6CD5;&#x662F;&#x8C03;&#x7528;store.dispatch&#x65B9;&#x6CD5;</li>
<li>&#x5728;&#x6574;&#x4E2A;&#x5E94;&#x7528;&#x4E2D;&#x53EA;&#x80FD;&#x6709;&#x4E00;&#x4E2A;&#x4ED3;&#x5E93;</li>
<li>&#x4E3A;&#x4E86;&#x6307;&#x5B9A;&#x72B6;&#x6001;&#x6811;&#x7684;&#x5404;&#x4E2A;&#x90E8;&#x5206;&#x5982;&#x4F55;&#x54CD;&#x5E94;action&#x7684;&#x53D8;&#x5316;&#xFF0C;&#x4F60;&#x53EF;&#x80FD;&#x4F7F;&#x7528;combineReducers&#x65B9;&#x6CD5;&#x628A;&#x591A;&#x4E2A;reducer&#x5408;&#x5E76;&#x4E3A;&#x4E00;&#x4E2A;&#x5355;&#x72EC;&#x7684;reducer</li>
<li></li>
<li>@param {Function} reducer &#x4E00;&#x4E2A;&#x901A;&#x8FC7;&#x5F53;&#x524D;&#x72B6;&#x6001;&#x5BF9;&#x8C61;&#x548C;&#x8981;&#x5904;&#x7406;&#x7684;action&#x8FD4;&#x56DE;&#x65B0;&#x7684;&#x72B6;&#x6001;&#x6811;&#x7684;&#x51FD;&#x6570;</li>
<li>@param {any} [preloadedState] &#x521D;&#x59CB;&#x72B6;&#x6001;&#x3002;&#x5728;&#x540C;&#x6784;&#x5E94;&#x7528;&#x4E2D;&#xFF0C;&#x4F60;&#x53EF;&#x80FD;&#x9700;&#x8981;&#x6307;&#x5B9A;&#x5B83;&#x4EE5;&#x5408;&#x5E76;&#x6765;&#x81EA;&#x670D;&#x52A1;&#x5668;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x6216;&#x8005;&#x4ECE;&#x4E00;&#x4E2A;&#x4EE5;&#x524D;&#x5E8F;&#x5217;&#x5316;&#x7684;&#x7528;&#x6237;&#x4F1A;&#x8BDD;&#x4E2D;&#x6062;&#x590D;. </li>
<li>&#x5982;&#x679C;&#x4F60;&#x4F7F;&#x7528;&#x4E86;combineReducers,&#x6765;&#x4ECE;&#x6839;reducer&#x4E2D;&#x4EA7;&#x751F;&#x72B6;&#x6001;&#xFF0C;&#x8FD9;&#x5FC5;&#x987B;&#x662F;&#x4E00;&#x4E2A;&#x548C;combineReducer &#x7684;keys&#x76F8;&#x540C;&#x5F62;&#x72B6;&#x7684;&#x5BF9;&#x8C61;</li>
<li>@param {Function} [enhancer] &#x4ED3;&#x5E93;&#x7684;enhancer. &#x4F60;&#x53EF;&#x80FD;&#x9700;&#x8981;&#x6307;&#x5B9A;&#x8FD9;&#x4E2A;&#x53BB;&#x589E;&#x5F3A;&#x4ED3;&#x5E93;&#x7684;&#x80FD;&#x529B;&#x4EE5;&#x4F7F;&#x7528;&#x7B2C;&#x4E09;&#x65B9;&#x7684;&#x80FD;&#x529B;&#x6BD4;&#x5982;&#x4E2D;&#x95F4;&#x4EF6;</li>
<li>&#x65F6;&#x95F4;&#x65C5;&#x884C;&#xFF0C;&#x6301;&#x4E45;&#x5316;&#x7B49;&#x7B49;&#x3002;redux&#x81EA;&#x5E26;&#x7684;&#x552F;&#x4E00;&#x4E2D;&#x95F4;&#x4EF6;&#x662F;applyMiddleware</li>
<li>@returns {Store} &#x662F;&#x4E00;&#x4E2A;Redux&#x4ED3;&#x5E93;&#x8BA9;&#x4F60;&#x53EF;&#x4EE5;&#x8BFB;&#x53D6;&#x72B6;&#x6001;&#xFF0C;&#x6D3E;&#x53D1;action&#x5E76;&#x8BA2;&#x9605;&#x72B6;&#x6001;&#x53D8;&#x5316;
*/</li>
</ul>
</li>
</ul>
<p>export default function createStore(reducer,preloadedState,enhancer) {
    if (enhancer) {
        return enhancer(createStore)(reducer,preloadedState);
    }
    let state=preloadedState;
    let listeners=[];
    /**</p>
<pre><code> * &#x8BFB;&#x53D6;&#x4ED3;&#x5E93;&#x7BA1;&#x7406;&#x7684;&#x72B6;&#x6001;&#x6811;
 * @returns {any} &#x5E94;&#x7528;&#x5F53;&#x524D;&#x7684;&#x72B6;&#x6001;&#x6811;
 */
function getState() {
    return state;
}
/**
 * &#x589E;&#x52A0;&#x4E00;&#x4E2A;&#x53D8;&#x5316;&#x76D1;&#x542C;&#x51FD;&#x6570;&#x3002;&#x5B83;&#x5C06;&#x5728;&#x4EFB;&#x4F55;&#x6D3E;&#x53D1;&#x52A8;&#x4F5C;&#x7684;&#x65F6;&#x5019;&#x88AB;&#x8C03;&#x7528;
 * &#x72B6;&#x6001;&#x6811;&#x7684;&#x90E8;&#x5206;&#x6570;&#x636E;&#x53EF;&#x80FD;&#x4F1A;&#x53D1;&#x751F;&#x6F5C;&#x5728;&#x7684;&#x53D8;&#x5316;&#x3002;&#x4F60;&#x53EF;&#x80FD;&#x5728;&#x90A3;&#x4E2A;&#x65F6;&#x5019;&#x5728;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x4E2D;&#x8C03;&#x7528;getState&#x65B9;&#x6CD5;&#x4EE5;&#x83B7;&#x53D6;&#x6700;&#x65B0;&#x7684;&#x72B6;&#x6001;&#x3002;
 * &#x4F60;&#x53EF;&#x80FD;&#x4F1A;&#x5728;&#x76D1;&#x542C;&#x51FD;&#x6570;&#x91CC;&#x8C03;&#x7528;dispatch&#x65B9;&#x6CD5;&#xFF0C;&#x5B83;&#x4F1A;&#x5177;&#x5907;&#x4EE5;&#x4E0B;&#x6CE8;&#x610F;&#x4E8B;&#x9879;
 * 1. &#x8BA2;&#x9605;&#x4EC5;&#x4EC5;&#x5728;&#x6BCF;&#x4E00;&#x6B21;&#x8C03;&#x7528;&#x6BCF;&#x4E00;&#x4E2A;dispatch&#x65B9;&#x6CD5;&#x65F6;&#x88AB;&#x8BB0;&#x5F55;&#x5FEB;&#x7167;
 * &#x5982;&#x679C;&#x4F60;&#x5728;&#x76D1;&#x542C;&#x51FD;&#x6570;&#x88AB;&#x89E6;&#x53D1;&#x7684;&#x65F6;&#x5019;&#x8BA2;&#x9605;&#x6216;&#x53D6;&#x6D88;&#x8BA2;&#x9605;&#x7684;&#x8BDD;&#xFF0C;&#x8FD9;&#x5BF9;&#x5F53;&#x524D;&#x6B63;&#x5728;&#x5904;&#x7406;&#x4E2D;&#x7684;dispatch&#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x6548;&#x679C;
 * &#x5C3D;&#x7BA1;&#x5982;&#x6B64;&#xFF0C;&#x5728;&#x4E0B;&#x4E00;&#x6B21;dispatch&#x65B9;&#x6CD5;&#x7684;&#x8C03;&#x7528;&#x4E2D;&#xFF0C;&#x4E0D;&#x7BA1;&#x662F;&#x4E0D;&#x662F;&#x5185;&#x5D4C;&#xFF0C;&#x90FD;&#x5C06;&#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x6700;&#x65B0;&#x7684;&#x8BA2;&#x9605;&#x5217;&#x8868;
 * 
 * 2.&#x76D1;&#x542C;&#x51FD;&#x6570;&#x4E0D;&#x5E94;&#x8BE5;&#x9884;&#x671F;&#x6240;&#x6709;&#x7684;&#x72B6;&#x6001;&#x53D8;&#x5316;&#xFF0C;&#x56E0;&#x4E3A;&#x72B6;&#x6001;&#x53EF;&#x80FD;&#x5728;dispatch&#x4E2D;&#x88AB;&#x66F4;&#x65B0;&#x591A;&#x6B21;&#x3002; &#x5C3D;&#x7BA1;&#x5982;&#x6B64;&#xFF0C;&#x5728; dispatch&#x4E4B;&#x524D;&#x6CE8;&#x518C;&#x7684;&#x8BA2;&#x9605;&#x8005;&#x5C06;&#x4F1A;&#x4EE5;&#x6700;&#x65B0;&#x7684;&#x72B6;&#x6001;&#x8C03;&#x7528;
 * 
 * @param {*} listener  &#x6BCF;&#x4E00;&#x6B21;dispatch&#x65F6;&#x88AB;&#x8C03;&#x7528;&#x7684;&#x76D1;&#x542C;&#x51FD;&#x6570;
 * @returns {Function} &#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x53EF;&#x4EE5;&#x79FB;&#x9664;&#x6B64;&#x76D1;&#x542C;&#x51FD;&#x6570;&#x7684;&#x51FD;&#x6570;
 */
function subscribe(listener) {
    listeners.push(listener);
    return function () {
        const index=listeners.indexOf(listener);
        listeners.splice(inddx,1);
    }
}

/**
 * &#x6D3E;&#x53D1;&#x4E00;&#x4E2A;&#x52A8;&#x4F5C;&#xFF0C;&#x8FD9;&#x662F;&#x89E6;&#x53D1;&#x72B6;&#x6001;&#x6539;&#x53D8;&#x7684;&#x552F;&#x4E00;&#x65B9;&#x5F0F;
 * &#x7528;&#x6765;&#x521B;&#x5EFA;&#x4ED3;&#x5E93;&#x7684;reducer&#x51FD;&#x6570;&#x5C06;&#x4F1A;&#x88AB;&#x8C03;&#x7528;&#xFF0C;&#x53C2;&#x6570;&#x662F;&#x5F53;&#x524D;&#x7684;&#x72B6;&#x6001;&#x6811;&#x548C;&#x7ED9;&#x5B9A;&#x7684;&#x52A8;&#x4F5C;&#x3002;&#x5B83;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x5C06;&#x4F1A;&#x88AB;&#x5F53;&#x4F5C;&#x4E0B;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x6811;&#xFF0C;&#x6240;&#x6709;&#x7684;&#x76D1;&#x542C;&#x51FD;&#x6570;&#x4E5F;&#x4F1A;&#x88AB;&#x901A;&#x77E5;
 * 
 * &#x57FA;&#x672C;&#x5B9E;&#x73B0;&#x4E2D;&#x53EA;&#x652F;&#x6301;&#x7B80;&#x5355;&#x52A8;&#x4F5C;&#x5BF9;&#x8C61;&#x3002;&#x5982;&#x679C;&#x4F60;&#x60F3;&#x8981;&#x6D3E;&#x53D1;&#x4E00;&#x4E2A;Promise&#x3001;&#x4E00;&#x4E2A;Observerable&#x3001;&#x4E00;&#x4E2A;thunk&#x6216;&#x8005;&#x5176;&#x5B83;&#x7684;&#x4EFB;&#x4F55;&#x61C2;&#x7231;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x628A;&#x4F60;&#x521B;&#x5EFA;&#x4ED3;&#x5E93;&#x7684;&#x51FD;&#x6570;&#x5305;&#x88F9;&#x5230;&#x5BF9;&#x5E94;&#x7684;&#x4E2D;&#x95F4;&#x4EF6;&#x91CC;&#x3002;
 * &#x6BD4;&#x5982;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x770B;&#x4E00;&#x4E0B;redux-thunk&#x5305;&#x3002;&#x751A;&#x81F3;&#x4E2D;&#x95F4;&#x4EF6;&#x6700;&#x540E;&#x901A;&#x8FC7;&#x8FD9;&#x4E2A;&#x65B9;&#x6CD5;&#x5C06;&#x4F1A;&#x6D3E;&#x53D1;&#x7B80;&#x5355;&#x5BF9;&#x8C61;&#x3002;
 * 
 * 
 * @param {*} action &#x4E00;&#x4E2A;&#x8868;&#x793A;&#x53D1;&#x751F;&#x4E86;&#x4EC0;&#x4E48;&#x7684;&#x7B80;&#x5355;&#x5BF9;&#x8C61;&#x3002;&#x4FDD;&#x6301;&#x52A8;&#x4F5C;&#x5E8F;&#x5217;&#x5316;&#x5C06;&#x4F1A;&#x662F;&#x4E00;&#x4E2A;&#x597D;&#x4E3B;&#x610F;&#xFF0C;&#x4EE5;&#x65B9;&#x4FBF;&#x4F60;&#x8FDB;&#x884C;&#x8BB0;&#x5F55;&#x548C;&#x56DE;&#x653E;&#x7528;&#x6237;&#x4F1A;&#x8BDD;&#x3002;&#x6216;&#x8005;&#x4F7F;&#x7528;&#x65F6;&#x95F4;&#x65C5;&#x884C;&#x5DE5;&#x5177;redux-devtools.&#x4E00;&#x4E2A;&#x52A8;&#x4F5C;&#x5FC5;&#x987B;&#x6709;&#x4E00;&#x4E2A;type&#x5C5E;&#x6027;&#x800C;&#x4E14;&#x4E0D;&#x80FD;&#x662F;undefine.&#x4F7F;&#x7528;&#x5B57;&#x7B26;&#x4E32;&#x5E38;&#x91CF;&#x8868;&#x793A;&#x52A8;&#x4F5C;&#x7C7B;&#x578B;&#x5C06;&#x4F1A;&#x662F;&#x4E2A;&#x597D;&#x4E3B;&#x610F;&#x3002;
 * @returns {object} &#x4E3A;&#x4E86;&#x65B9;&#x4FBF;&#xFF0C;&#x4F60;&#x6D3E;&#x53D1;&#x7684;&#x76F8;&#x540C;&#x7684;&#x52A8;&#x4F5C;&#x5BF9;&#x8C61;
 * &#x8BF7;&#x6CE8;&#x610F;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x81EA;&#x5B9A;&#x4E49;&#x4E2D;&#x95F4;&#x4EF6;&#xFF0C;&#x4F60;&#x53EF;&#x80FD;&#x9700;&#x8981;&#x5305;&#x88F9; dispatch&#x53BB;&#x8FD4;&#x56DE;&#x522B;&#x7684;&#x4E1C;&#x897F;(&#x6BD4;&#x5982;&#x4F60;&#x7B49;&#x5F85;&#x7684;Promise)
 */
function dispatch(action) {
    state=reducer(state,action);
    listeners.forEach(listener=&gt;listener())
}
dispatch({type:&apos;@@redux/INIT&apos;});
return {
    dispatch,
    subscribe,
    getState
}
</code></pre><p>}</p>
<pre><code>
#### 10.4 &#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;&#x548C;&#x53D1;&#x5E03;&#x8BA2;&#x9605;&#x6A21;&#x5F0F;
##### 10.4.1 &#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;(Observer)
- &#x8BA2;&#x9605;&#x8005;&#x628A;&#x81EA;&#x5DF1;&#x60F3;&#x8BA2;&#x9605;&#x7684;&#x4E8B;&#x4EF6;&#x6CE8;&#x518C;&#x5230;&#x8C03;&#x5EA6;&#x4E2D;&#x5FC3;
- &#x5F53;&#x8BE5;&#x4E8B;&#x4EF6;&#x89E6;&#x53D1;&#x65F6;&#x5019;&#xFF0C;&#x53D1;&#x5E03;&#x8005;&#x53D1;&#x5E03;&#x8BE5;&#x4E8B;&#x4EF6;&#x5230;&#x8C03;&#x5EA6;&#x4E2D;&#x5FC3;,&#x7531;&#x8C03;&#x5EA6;&#x4E2D;&#x5FC3;&#x7EDF;&#x4E00;&#x8C03;&#x5EA6;&#x8BA2;&#x9605;&#x8005;&#x6CE8;&#x518C;&#x5230;&#x8C03;&#x5EA6;&#x4E2D;&#x5FC3;&#x7684;&#x5904;&#x7406;&#x4EE3;&#x7801;&#x3002;

```js
class Agency{
    constructor() {
        this._topics={};
    }
    subscribe(topic,listener) {
        let listeners=this._topics[topic];
        if (listeners) {
            listeners.push(listener);
        } else {
            this._topics[topic]=[listener];
        }
    }
    publish(topic) {
        let listeners=this._topics[topic];
        let args=Array.from(arguments).slice(1);
        listeners.forEach(listener =&gt; listener(...args));
    }
}
let agent=new Agency();
class Landlord{
    constructor(name) {
        this.name=name;
    }
    lend(agent,area,money) {
        agent.publish(&apos;house&apos;,area,money);
    }
}

class Tenant{
    constructor(name) {
        this.name=name;
    }
    rent(agent) {
        agent.subscribe(&apos;house&apos;, (area,money)=&gt; {
            console.log(`&#x6709;&#x65B0;&#x623F;&#x6E90;&#x4E86;, ${area}&#x5E73;&#x7C73;, ${money}&#x5143;`);
        });
    }
}
let t1=new Tenant(&apos;&#x623F;&#x5BA2;1&apos;);
let t2=new Tenant(&apos;&#x623F;&#x5BA2;2&apos;);
let l1=new Landlord(&apos;&#x623F;&#x4E1C;1&apos;);
t1.rent(agent);
t2.rent(agent);
l1.lend(agent,30,2000);
</code></pre><ul>
<li>&#x867D;&#x7136;&#x4E24;&#x79CD;&#x6A21;&#x5F0F;&#x90FD;&#x5B58;&#x5728;&#x8BA2;&#x9605;&#x8005;&#x548C;&#x53D1;&#x5E03;&#x8005;&#xFF08;&#x89C2;&#x5BDF;&#x8005;&#x53EF;&#x8BA4;&#x4E3A;&#x662F;&#x8BA2;&#x9605;&#x8005;&#x3001;&#x88AB;&#x89C2;&#x5BDF;&#x8005;&#x53EF;&#x8BA4;&#x4E3A;&#x662F;&#x53D1;&#x5E03;&#x8005;&#xFF09;</li>
<li>&#x4F46;&#x662F;&#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;&#x662F;&#x7531;&#x88AB;&#x89C2;&#x5BDF;&#x8005;&#x8C03;&#x5EA6;&#x7684;&#xFF0C;&#x800C;&#x53D1;&#x5E03;/&#x8BA2;&#x9605;&#x6A21;&#x5F0F;&#x662F;&#x7EDF;&#x4E00;&#x7531;&#x8C03;&#x5EA6;&#x4E2D;&#x5FC3;&#x8C03;&#x7684;</li>
<li>&#x6240;&#x4EE5;&#x89C2;&#x5BDF;&#x8005;&#x6A21;&#x5F0F;&#x7684;&#x8BA2;&#x9605;&#x8005;&#x4E0E;&#x53D1;&#x5E03;&#x8005;&#x4E4B;&#x95F4;&#x662F;&#x5B58;&#x5728;&#x4F9D;&#x8D56;&#x7684;&#xFF0C;&#x800C;&#x53D1;&#x5E03;/&#x8BA2;&#x9605;&#x6A21;&#x5F0F;&#x5219;&#x4E0D;&#x4F1A;&#x3002;</li>
</ul>
<h2 id="t11111. &#x8FED;&#x4EE3;&#x5668;&#x6A21;&#x5F0F;">11. &#x8FED;&#x4EE3;&#x5668;&#x6A21;&#x5F0F; <a href="#t11111. &#x8FED;&#x4EE3;&#x5668;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x987A;&#x5E8F;&#x8BBF;&#x95EE;&#x4E00;&#x4E2A;&#x96C6;&#x5408;</li>
<li>&#x4F7F;&#x7528;&#x8005;&#x65E0;&#x9700;&#x77E5;&#x9053;&#x96C6;&#x5408;&#x7684;&#x5185;&#x90E8;&#x6570;&#x636E;&#x7ED3;&#x6784;</li>
</ul>
<h3 id="t11211.1 &#x7C7B;&#x56FE;">11.1 &#x7C7B;&#x56FE; <a href="#t11211.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_27475743_1720749.jpeg" alt="iterator"></p>
<h3 id="t11311.2 &#x4EE3;&#x7801;">11.2 &#x4EE3;&#x7801; <a href="#t11311.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createIterator</span>(<span class="hljs-params">arr</span>) </span>{
    <span class="hljs-keyword">let</span> index=<span class="hljs-number">0</span>;
    <span class="hljs-keyword">return</span> {
        next() {
            <span class="hljs-keyword">return</span> index&lt;arr.length?
                {<span class="hljs-attr">value</span>: arr[index++],<span class="hljs-attr">done</span>: <span class="hljs-literal">false</span>}:
                {<span class="hljs-attr">done</span>:<span class="hljs-literal">true</span>}
        }
    }
}
<span class="hljs-keyword">let</span> it=createIterator([<span class="hljs-number">1</span>,<span class="hljs-number">2</span>]);
<span class="hljs-built_in">console</span>.log(it.next());
<span class="hljs-built_in">console</span>.log(it.next());
<span class="hljs-built_in">console</span>.log(it.next());
</code></pre>
<h3 id="t11411.3 &#x573A;&#x666F;">11.3 &#x573A;&#x666F; <a href="#t11411.3 &#x573A;&#x666F;"> # </a></h3>
<h4 id="t11511.3.1 Iterator">11.3.1 Iterator <a href="#t11511.3.1 Iterator"> # </a></h4>
<ul>
<li>&#x5728;ES6&#x4E2D;&#x6709;&#x5E8F;&#x96C6;&#x5408;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x6709;Array&#x3001;Map&#x3001;Set&#x3001;String&#x3001;TypedArray&#x3001;arguments&#x3001;NodeList</li>
<li>&#x6211;&#x4EEC;&#x9700;&#x8981;&#x6709;&#x4E00;&#x4E2A;&#x7EDF;&#x4E00;&#x7684;&#x904D;&#x5386;&#x63A5;&#x53E3;&#x6765;&#x904D;&#x5386;&#x6240;&#x6709;&#x7684;&#x6570;&#x636E;&#x7C7B;&#x578B;</li>
<li>&#x4ED6;&#x4EEC;&#x90FD;&#x6709; [Symbol.Iterator]&#x5C5E;&#x6027;&#xFF0C;&#x5C5E;&#x6027;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x6267;&#x884C;&#x51FD;&#x6570;&#x4F1A;&#x8FD4;&#x56DE;&#x8FED;&#x4EE3;&#x5668;</li>
<li>&#x8FED;&#x4EE3;&#x5668;&#x5C31;&#x6709;next&#x65B9;&#x6CD5;&#x987A;&#x5E8F;&#x8FD4;&#x56DE;&#x5B50;&#x5143;&#x7D20;<pre><code class="lang-js"><span class="hljs-built_in">Array</span>.prototype[<span class="hljs-built_in">Symbol</span>.iterator]=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> index=<span class="hljs-number">0</span>;
  <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">next</span>:<span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span> {
          <span class="hljs-keyword">return</span> index&lt;<span class="hljs-keyword">this</span>.length?
              {<span class="hljs-attr">value</span>: <span class="hljs-keyword">this</span>[index++],<span class="hljs-attr">done</span>: <span class="hljs-literal">false</span>}:
              {<span class="hljs-attr">done</span>:<span class="hljs-literal">true</span>}
      }
  }
}
<span class="hljs-keyword">let</span> arr=[<span class="hljs-number">1</span>,<span class="hljs-number">2</span>];
<span class="hljs-keyword">let</span> it=arr[<span class="hljs-built_in">Symbol</span>.iterator]();
<span class="hljs-built_in">console</span>.log(it.next());
<span class="hljs-built_in">console</span>.log(it.next());
<span class="hljs-built_in">console</span>.log(it.next());
</code></pre>
</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> result={};
<span class="hljs-keyword">while</span> (!result.done) {
    result=it.next();
    <span class="hljs-built_in">console</span>.log(result);
}
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> arr) {
    <span class="hljs-built_in">console</span>.log(item);
}
</code></pre>
<h4 id="t11611.3.2 ...">11.3.2 ... <a href="#t11611.3.2 ..."> # </a></h4>
<p>&#x89E3;&#x6784;&#x8D4B;&#x503C;</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>];
<span class="hljs-keyword">let</span> [x,y] = arr;
<span class="hljs-keyword">let</span> arr2 = [<span class="hljs-number">1</span>, ...arr];
</code></pre>
<h4 id="t11711.3.3 yield*">11.3.3 yield* <a href="#t11711.3.3 yield*"> # </a></h4>
<p>yield*&#x540E;&#x9762;&#x8DDF;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x53EF;&#x904D;&#x5386;&#x7684;&#x7ED3;&#x6784;&#xFF0C;&#x5B83;&#x4F1A;&#x8C03;&#x7528;&#x8BE5;&#x7ED3;&#x6784;&#x7684;&#x904D;&#x5386;&#x5668;&#x63A5;&#x53E3;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> generator = <span class="hljs-function"><span class="hljs-keyword">function</span>* (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">yield</span> <span class="hljs-number">1</span>;
    <span class="hljs-keyword">yield</span>* [<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>];
    <span class="hljs-keyword">yield</span> <span class="hljs-number">5</span>;
  };

<span class="hljs-keyword">var</span> iterator = generator();

<span class="hljs-built_in">console</span>.log(iterator.next()); <span class="hljs-comment">// { value: 1, done: false }</span>
<span class="hljs-built_in">console</span>.log(iterator.next()); <span class="hljs-comment">// { value: 2, done: false }</span>
<span class="hljs-built_in">console</span>.log(iterator.next());<span class="hljs-comment">// { value: 3, done: false }</span>
<span class="hljs-built_in">console</span>.log(iterator.next()); <span class="hljs-comment">// { value: 4, done: false }</span>
<span class="hljs-built_in">console</span>.log(iterator.next()); <span class="hljs-comment">// { value: 5, done: false }</span>
<span class="hljs-built_in">console</span>.log(iterator.next()); <span class="hljs-comment">// { value: undefined, done: true }</span>
</code></pre>
<h3 id="t11812. &#x72B6;&#x6001;&#x6A21;&#x5F0F;">12. &#x72B6;&#x6001;&#x6A21;&#x5F0F; <a href="#t11812. &#x72B6;&#x6001;&#x6A21;&#x5F0F;"> # </a></h3>
<ul>
<li>&#x5F53;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x7684;&#x5185;&#x90E8;&#x72B6;&#x6001;&#x53D1;&#x751F;&#x6539;&#x53D8;&#x65F6;&#xFF0C;&#x4F1A;&#x5BFC;&#x81F4;&#x5176;&#x884C;&#x4E3A;&#x7684;&#x6539;&#x53D8;&#xFF0C;&#x8FD9;&#x770B;&#x8D77;&#x6765;&#x50CF;&#x662F;&#x6539;&#x53D8;&#x4E86;&#x5BF9;&#x8C61;</li>
<li>&#x5BF9;&#x8C61;&#x6709;&#x81EA;&#x5DF1;&#x7684;&#x72B6;&#x6001;</li>
<li>&#x4E0D;&#x540C;&#x72B6;&#x6001;&#x4E0B;&#x6267;&#x884C;&#x7684;&#x903B;&#x8F91;&#x4E0D;&#x4E00;&#x6837;</li>
<li>&#x660E;&#x786E;&#x72B6;&#x6001;&#x548C;&#x6BCF;&#x4E2A;&#x72B6;&#x6001;&#x4E0B;&#x6267;&#x884C;&#x7684;&#x52A8;&#x4F5C;</li>
<li>&#x7528;&#x6765;&#x51CF;&#x5C11;<code>if...else</code>&#x5B50;&#x53E5;</li>
</ul>
<h3 id="t11912.1 &#x7C7B;&#x56FE;">12.1 &#x7C7B;&#x56FE; <a href="#t11912.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_c048eb45_1720749.jpeg" alt="state"></p>
<h3 id="t12012.2 &#x4EE3;&#x7801;">12.2 &#x4EE3;&#x7801; <a href="#t12012.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Battery</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.amount=<span class="hljs-string">&apos;high&apos;</span>;
    }
    show() {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.amount == <span class="hljs-string">&apos;high&apos;</span>) {
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x7EFF;&#x8272;&apos;</span>);
            <span class="hljs-keyword">this</span>.amount=<span class="hljs-string">&apos;middle&apos;</span>;
        }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.amount == <span class="hljs-string">&apos;middle&apos;</span>) {
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x9EC4;&#x8272;&apos;</span>);
            <span class="hljs-keyword">this</span>.amount=<span class="hljs-string">&apos;low&apos;</span>;
        }<span class="hljs-keyword">else</span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x7EA2;&#x8272;&apos;</span>);
        }
    }
}
<span class="hljs-keyword">let</span> battery=<span class="hljs-keyword">new</span> Battery();
battery.show();
battery.show();
battery.show();
</code></pre>
<ul>
<li><code>show</code>&#x8FDD;&#x53CD;&#x5F00;&#x653E;-&#x5C01;&#x95ED;&#x539F;&#x5219;</li>
<li><code>show</code>&#x65B9;&#x6CD5;&#x903B;&#x8F91;&#x592A;&#x591A;&#x592A;&#x590D;&#x6742;</li>
<li>&#x989C;&#x8272;&#x72B6;&#x6001;&#x5207;&#x6362;&#x4E0D;&#x660E;&#x663E;</li>
<li>&#x8FC7;&#x591A;&#x7684; <code>if/else</code> &#x8BA9;&#x4EE3;&#x7801;&#x4E0D;&#x53EF;&#x7EF4;&#x62A4;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Battery</span> </span>{
    <span class="hljs-keyword">constructor</span>(state) {
        <span class="hljs-keyword">this</span>.amount = <span class="hljs-string">&apos;high&apos;</span>;
        <span class="hljs-keyword">this</span>.state = <span class="hljs-keyword">new</span> SuccessState();
    }
    show() {
        <span class="hljs-keyword">this</span>.state.show();
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.amount == <span class="hljs-string">&apos;high&apos;</span>) {
            <span class="hljs-keyword">this</span>.amount=<span class="hljs-string">&apos;middle&apos;</span>;
            <span class="hljs-keyword">this</span>.setState(<span class="hljs-keyword">new</span> WarningState());
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.amount==<span class="hljs-string">&apos;middle&apos;</span>){
            <span class="hljs-keyword">this</span>.amount=<span class="hljs-string">&apos;low&apos;</span>;
            <span class="hljs-keyword">this</span>.setState(<span class="hljs-keyword">new</span> DangerState());
        }
    }
    setState(state) {
        <span class="hljs-keyword">this</span>.state = state;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SuccessState</span> </span>{
    <span class="hljs-keyword">constructor</span>(battery){
        <span class="hljs-keyword">this</span>.battery = battery;
    }
    show() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x7EFF;&#x8272; <span class="hljs-subst">${battery.amount}</span>`</span>);

  }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">WarningState</span> </span>{
    <span class="hljs-keyword">constructor</span>(battery){
        <span class="hljs-keyword">this</span>.battery = battery;
    }
    show() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x9EC4;&#x8272; <span class="hljs-subst">${battery.amount}</span>`</span>);
  }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DangerState</span> </span>{
    <span class="hljs-keyword">constructor</span>(battery){
        <span class="hljs-keyword">this</span>.battery = battery;
    }
    show() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x7EA2;&#x8272; <span class="hljs-subst">${battery.amount}</span>`</span>);
  }
}

<span class="hljs-keyword">let</span> battery=<span class="hljs-keyword">new</span> Battery();
battery.show();
battery.show();
battery.show();
</code></pre>
<h3 id="t12112.3 &#x5E94;&#x7528;&#x573A;&#x666F;">12.3 &#x5E94;&#x7528;&#x573A;&#x666F; <a href="#t12112.3 &#x5E94;&#x7528;&#x573A;&#x666F;"> # </a></h3>
<h4 id="t12212.3.1 &#x70B9;&#x8D5E;">12.3.1 &#x70B9;&#x8D5E; <a href="#t12212.3.1 &#x70B9;&#x8D5E;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> likeState={
    render(element) {
        element.innerHTML=<span class="hljs-string">&apos;&#x8D5E;&#x1F44D;&apos;</span>;
    }
}
<span class="hljs-keyword">let</span> likedState={
    render(element) {
        element.innerHTML=<span class="hljs-string">&apos;&#x53D6;&#x6D88;&apos;</span>;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Button</span></span>{
    <span class="hljs-keyword">constructor</span>(container) {
        <span class="hljs-keyword">this</span>.liked=<span class="hljs-literal">false</span>;
        <span class="hljs-keyword">this</span>.state = likeState;
        <span class="hljs-keyword">this</span>.element=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;button&apos;</span>);
        container.appendChild(<span class="hljs-keyword">this</span>.element);
        <span class="hljs-keyword">this</span>.render();
    }
    setState(state) {
        <span class="hljs-keyword">this</span>.state=state;
        <span class="hljs-keyword">this</span>.render();
    }
    render() {
        <span class="hljs-keyword">this</span>.state.render(<span class="hljs-keyword">this</span>.element);
    }
}

<span class="hljs-keyword">let</span> button=<span class="hljs-keyword">new</span> Button(<span class="hljs-built_in">document</span>.body);
button.element.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,() =&gt; {
    button.setState(button.liked? likeState:likedState);
    button.liked=!button.liked;
});
</code></pre>
<h4 id="t12312.3.2 promise">12.3.2 promise <a href="#t12312.3.2 promise"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Promise</span></span>{
    <span class="hljs-keyword">constructor</span>(fn) {
        <span class="hljs-keyword">this</span>.state=<span class="hljs-string">&apos;initial&apos;</span>;
        <span class="hljs-keyword">this</span>.successes=[];
        <span class="hljs-keyword">this</span>.fails=[];
        <span class="hljs-keyword">let</span> resolve=<span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> {
            <span class="hljs-keyword">this</span>.state=<span class="hljs-string">&apos;fulfilled&apos;</span>;
            <span class="hljs-keyword">this</span>.successes.forEach(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item(data));
        }
        <span class="hljs-keyword">let</span> reject=<span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> {
            <span class="hljs-keyword">this</span>.state=<span class="hljs-string">&apos;failed&apos;</span>;
            <span class="hljs-keyword">this</span>.fails.forEach(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item(error));
        }
        fn(resolve,reject);
    }
    then(success,fail) {
        <span class="hljs-keyword">this</span>.successes.push(success);
        <span class="hljs-keyword">this</span>.fails.push(fail);
    }
}
<span class="hljs-keyword">let</span> p=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve,reject</span>) </span>{
    setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        resolve(<span class="hljs-number">1</span>);
    },<span class="hljs-number">1000</span>);
});
p.then(<span class="hljs-function">(<span class="hljs-params">data</span>)=&gt;</span><span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x6210;&#x529F;&apos;</span>),error=&gt;<span class="hljs-built_in">console</span>.error(<span class="hljs-string">&apos;&#x5931;&#x8D25;&apos;</span>));
</code></pre>
<h4 id="t12412.3.3  React&#x5BFC;&#x822A;">12.3.3  React&#x5BFC;&#x822A; <a href="#t12412.3.3  React&#x5BFC;&#x822A;"> # </a></h4>
<ul>
<li><a href="https://codepen.io/zhufengnodejs/pen/LXogOy">codepen.io</a><pre><code class="lang-js"><span class="hljs-keyword">const</span> States = {
<span class="hljs-string">&apos;show&apos;</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;banner&#x663E;&#x793A;&#xFF0C;&#x70B9;&#x51FB;&#x53EF;&#x4EE5;&#x5173;&#x95ED;&quot;</span>);
  <span class="hljs-keyword">this</span>.setState({
    <span class="hljs-attr">currentState</span>: <span class="hljs-string">&quot;hide&quot;</span>
  })
},
<span class="hljs-string">&apos;hide&apos;</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;banner&#x9690;&#x85CF;&#xFF0C;&#x70B9;&#x51FB;&#x53EF;&#x4EE5;&#x6253;&#x5F00;&quot;</span>);
    <span class="hljs-keyword">this</span>.setState({
      <span class="hljs-attr">currentState</span>: <span class="hljs-string">&quot;show&quot;</span>
    })
}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Banner</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
state={<span class="hljs-attr">currentState</span>:<span class="hljs-string">&apos;show&apos;</span>}
toggle = <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
  <span class="hljs-keyword">let</span> s = <span class="hljs-keyword">this</span>.state.currentState;
  States[s] &amp;&amp; States[s].apply(<span class="hljs-keyword">this</span>);
}
render(){
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      {this.state.currentState==&apos;show&apos;&amp;&amp;<span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span>&#x5BFC;&#x822A;<span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span>}
      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.toggle}</span>&gt;</span>&#x9690;&#x85CF;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  )
}
}
ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Banner</span>/&gt;</span></span>,<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;root&apos;</span>));
</code></pre>
</li>
</ul>
<h4 id="t12512.3.4 &#x6709;&#x9650;&#x72B6;&#x6001;&#x673A;">12.3.4 &#x6709;&#x9650;&#x72B6;&#x6001;&#x673A; <a href="#t12512.3.4 &#x6709;&#x9650;&#x72B6;&#x6001;&#x673A;"> # </a></h4>
<ul>
<li>&#x4E8B;&#x7269;&#x62E5;&#x6709;&#x591A;&#x79CD;&#x72B6;&#x6001;&#xFF0C;&#x4EFB;&#x4E00;&#x65F6;&#x95F4;&#x53EA;&#x4F1A;&#x5904;&#x4E8E;&#x4E00;&#x79CD;&#x72B6;&#x6001;&#x4E0D;&#x4F1A;&#x5904;&#x4E8E;&#x591A;&#x79CD;&#x72B6;&#x6001;&#xFF1B;</li>
<li>&#x52A8;&#x4F5C;&#x53EF;&#x4EE5;&#x6539;&#x53D8;&#x4E8B;&#x7269;&#x72B6;&#x6001;&#xFF0C;&#x4E00;&#x4E2A;&#x52A8;&#x4F5C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x6761;&#x4EF6;&#x5224;&#x65AD;&#xFF0C;&#x6539;&#x53D8;&#x4E8B;&#x7269;&#x5230;&#x4E0D;&#x540C;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x80FD;&#x540C;&#x65F6;&#x6307;&#x5411;&#x591A;&#x4E2A;&#x72B6;&#x6001;&#xFF0C;&#x4E00;&#x4E2A;&#x65F6;&#x95F4;&#xFF0C;&#x5C31;&#x4E00;&#x4E2A;&#x72B6;&#x6001;</li>
<li>&#x72B6;&#x6001;&#x603B;&#x6570;&#x662F;&#x6709;&#x9650;&#x7684;&#xFF1B;</li>
<li><a href="https://github.com/jakesgordon/javascript-state-machine">javascript-state-machine</a><ul>
<li>form&#xFF1A;&#x5F53;&#x524D;&#x884C;&#x4E3A;&#x4ECE;&#x54EA;&#x4E2A;&#x72B6;&#x6001;&#x6765;</li>
<li>to:&#x5F53;&#x524D;&#x884C;&#x4E3A;&#x6267;&#x884C;&#x5B8C;&#x4F1A;&#x8FC7;&#x6E21;&#x5230;&#x54EA;&#x4E2A;&#x72B6;&#x6001;</li>
<li>name:&#x5F53;&#x524D;&#x884C;&#x4E3A;&#x7684;&#x540D;&#x5B57;</li>
</ul>
</li>
<li>fsm.can(t) - return true &#x5982;&#x679C;&#x8FC7;&#x6E21;&#x65B9;&#x6CD5;t&#x53EF;&#x4EE5;&#x4ECE;&#x5F53;&#x524D;&#x72B6;&#x6001;&#x89E6;&#x53D1;</li>
<li>fsm.cannot(t) - return true &#x5982;&#x679C;&#x5F53;&#x524D;&#x72B6;&#x6001;&#x4E0B;&#x4E0D;&#x80FD;&#x53D1;&#x751F;&#x8FC7;&#x6E21;&#x65B9;&#x6CD5;t</li>
<li>fsm.transitions() - &#x8FD4;&#x56DE;&#x4ECE;&#x5F53;&#x524D;&#x72B6;&#x6001;&#x53EF;&#x4EE5;&#x8FC7;&#x6E21;&#x5230;&#x7684;&#x72B6;&#x6001;&#x7684;&#x5217;&#x8868;</li>
<li>fsm.allTransitions() - &#x8FD4;&#x56DE;&#x6240;&#x6709;&#x8FC7;&#x6E21;&#x65B9;&#x6CD5;&#x7684;&#x5217;&#x8868;</li>
<li>fsm.allStates() - &#x8FD4;&#x56DE;&#x72B6;&#x6001;&#x673A;&#x6709;&#x7684;&#x6240;&#x6709;&#x72B6;&#x6001;&#x7684;&#x5217;&#x8868;</li>
<li>onBefore<transition> &#x5728;&#x7279;&#x5B9A;&#x52A8;&#x4F5C;TRANSITION&#x524D;&#x89E6;&#x53D1;</transition></li>
<li>onLeaveState &#x79BB;&#x5F00;&#x4EFB;&#x4F55;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x7684;&#x65F6;&#x5019;&#x89E6;&#x53D1;</li>
<li>onLeave<state> &#x5728;&#x79BB;&#x5F00;&#x7279;&#x5B9A;&#x72B6;&#x6001;STATE&#x65F6;&#x89E6;&#x53D1;</state></li>
<li>onTransition &#x5728;&#x4EFB;&#x4F55;&#x52A8;&#x4F5C;&#x53D1;&#x751F;&#x671F;&#x95F4;&#x89E6;&#x53D1;</li>
<li>onEnterState &#x5F53;&#x8FDB;&#x5165;&#x4EFB;&#x4F55;&#x72B6;&#x6001;&#x65F6;&#x89E6;&#x53D1;</li>
<li>onEnter<state> &#x8FDB;&#x5165;&#x4E00;&#x4E2A;&#x7279;&#x5B9A;&#x7684;&#x72B6;&#x6001;STATE&#x65F6;&#x89E6;&#x53D1;</state></li>
<li>on<state> onEnter<state>&#x7684;&#x7B80;&#x5199;</state></state></li>
<li>onAfterTransition &#x4EFB;&#x4F55;&#x52A8;&#x4F5C;&#x89E6;&#x53D1;&#x540E;&#x89E6;&#x53D1;</li>
<li>onAfter<transition> &#x5728;&#x7279;&#x5B9A;&#x52A8;&#x4F5C;TRANSITION&#x540E;&#x89E6;&#x53D1;</transition></li>
<li>on<transition> onAfter<transition>&#x7684;&#x7B80;&#x5199;</transition></transition></li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">//&#x6709;&#x9650;&#x72B6;&#x6001;&#x673A; Finite-state machine</span>
<span class="hljs-keyword">var</span> StateMachine = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;javascript-state-machine&apos;</span>);
<span class="hljs-comment">//&#x6709;&#x9650;&#x72B6;&#x6001;&#x673A; Finite-state machine</span>
<span class="hljs-comment">//var StateMachine=require(&apos;javascript-state-machine&apos;);</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StateMachine</span> </span>{
    <span class="hljs-keyword">constructor</span>(options) {
        <span class="hljs-keyword">let</span> {init,transitions,methods} =options;
        <span class="hljs-keyword">this</span>.state=init;
        transitions.forEach(<span class="hljs-function"><span class="hljs-params">transition</span> =&gt;</span> {
            <span class="hljs-keyword">let</span> {<span class="hljs-keyword">from</span>,to,name}=transition;
            <span class="hljs-keyword">this</span>[name]=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
                <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.state == <span class="hljs-keyword">from</span>) {
                    <span class="hljs-keyword">this</span>.state=to;
                    <span class="hljs-keyword">let</span> onMethod=<span class="hljs-string">&apos;on&apos;</span>+name.slice(<span class="hljs-number">0</span>,<span class="hljs-number">1</span>).toUpperCase()+name.slice(<span class="hljs-number">1</span>);
                    methods[onMethod]&amp;&amp;methods[onMethod]();
                }
            }
        });
    }
}
<span class="hljs-keyword">var</span> fsm = <span class="hljs-keyword">new</span> StateMachine({
    <span class="hljs-attr">init</span>: <span class="hljs-string">&apos;solid&apos;</span>,
    <span class="hljs-attr">transitions</span>: [{
            <span class="hljs-attr">name</span>: <span class="hljs-string">&apos;melt&apos;</span>,
            <span class="hljs-attr">from</span>: <span class="hljs-string">&apos;solid&apos;</span>,
            <span class="hljs-attr">to</span>: <span class="hljs-string">&apos;liquid&apos;</span>
        },
        {
            <span class="hljs-attr">name</span>: <span class="hljs-string">&apos;freeze&apos;</span>,
            <span class="hljs-attr">from</span>: <span class="hljs-string">&apos;liquid&apos;</span>,
            <span class="hljs-attr">to</span>: <span class="hljs-string">&apos;solid&apos;</span>
        },
        {
            <span class="hljs-attr">name</span>: <span class="hljs-string">&apos;vaporize&apos;</span>,
            <span class="hljs-attr">from</span>: <span class="hljs-string">&apos;liquid&apos;</span>,
            <span class="hljs-attr">to</span>: <span class="hljs-string">&apos;gas&apos;</span>
        },
        {
            <span class="hljs-attr">name</span>: <span class="hljs-string">&apos;condense&apos;</span>,
            <span class="hljs-attr">from</span>: <span class="hljs-string">&apos;gas&apos;</span>,
            <span class="hljs-attr">to</span>: <span class="hljs-string">&apos;liquid&apos;</span>
        }
    ],
    <span class="hljs-attr">methods</span>: {
        <span class="hljs-attr">onMelt</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;I melted&apos;</span>)
        },
        <span class="hljs-attr">onFreeze</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;I froze&apos;</span>)
        },
        <span class="hljs-attr">onVaporize</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;I vaporized&apos;</span>)
        },
        <span class="hljs-attr">onCondense</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;I condensed&apos;</span>)
        }
    }
});
fsm.melt();
</code></pre>
<h2 id="t12613.&#x7B56;&#x7565;&#x6A21;&#x5F0F;">13.&#x7B56;&#x7565;&#x6A21;&#x5F0F; <a href="#t12613.&#x7B56;&#x7565;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x5C06;&#x5B9A;&#x4E49;&#x7684;&#x4E00;&#x7EC4;&#x7B97;&#x6CD5;&#x5C01;&#x88C5;&#x8D77;&#x6765;&#xFF0C;&#x4F7F;&#x5176;&#x76F8;&#x4E92;&#x4E4B;&#x95F4;&#x53EF;&#x4EE5;&#x66FF;&#x6362;&#x3002;&#x5C01;&#x88C5;&#x7684;&#x7B97;&#x6CD5;&#x5177;&#x6709;&#x4E00;&#x5B9A;&#x72EC;&#x7ACB;&#x6027;&#xFF0C;&#x4E0D;&#x4F1A;&#x968F;&#x5BA2;&#x6237;&#x7AEF;&#x53D8;&#x5316;&#x800C;&#x53D8;&#x5316;&#x3002;</li>
<li>&#x907F;&#x514D;&#x5927;&#x91CF;&#x7684;if else &#x6216; swith case</li>
</ul>
<h3 id="t12713.1 &#x7C7B;&#x56FE;">13.1 &#x7C7B;&#x56FE; <a href="#t12713.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_cccc2ab0_1720749.jpeg" alt="strategy"></p>
<h3 id="t12813.2 &#x4EE3;&#x7801;">13.2 &#x4EE3;&#x7801; <a href="#t12813.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Customer</span></span>{
    <span class="hljs-keyword">constructor</span>(type) {
        <span class="hljs-keyword">this</span>.type=type;
    }
    pay(amount) {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type == <span class="hljs-string">&apos;&#x4F1A;&#x5458;&#x987E;&#x5BA2;&apos;</span>) {
            <span class="hljs-keyword">return</span> amount*<span class="hljs-number">.9</span>;
        }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.type == <span class="hljs-string">&apos;VIP&#x987E;&#x5BA2;&apos;</span>) {
            <span class="hljs-keyword">return</span> amount*<span class="hljs-number">.8</span>;
        } 
        <span class="hljs-keyword">return</span> amount;
    }
}
<span class="hljs-keyword">let</span> c1=<span class="hljs-keyword">new</span> Customer(<span class="hljs-string">&apos;&#x666E;&#x901A;&#x987E;&#x5BA2;&apos;</span>);
<span class="hljs-built_in">console</span>.log(c1.pay(<span class="hljs-number">100</span>));
<span class="hljs-keyword">let</span> c2=<span class="hljs-keyword">new</span> Customer(<span class="hljs-string">&apos;&#x4F1A;&#x5458;&#x987E;&#x5BA2;&apos;</span>);
<span class="hljs-built_in">console</span>.log(c2.pay(<span class="hljs-number">100</span>));
<span class="hljs-keyword">let</span> c3=<span class="hljs-keyword">new</span> Customer(<span class="hljs-string">&apos;VIP&#x987E;&#x5BA2;&apos;</span>);
<span class="hljs-built_in">console</span>.log(c3.pay(<span class="hljs-number">100</span>));
</code></pre>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Customer</span></span>{
    <span class="hljs-keyword">constructor</span>(kind) {
        <span class="hljs-keyword">this</span>.kind=kind;
    }
    cost(amount) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.kind.discount(amount);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Kind</span></span>{

}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Normal</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Kind</span></span>{
    discount(amount) {
        <span class="hljs-keyword">return</span> amount;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Member</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Kind</span></span>{
    discount(amount) {
        <span class="hljs-keyword">return</span> amount*<span class="hljs-number">.9</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">VIP</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Kind</span></span>{
    discount(amount) {
        <span class="hljs-keyword">return</span> amount*<span class="hljs-number">.8</span>;
    }
}
<span class="hljs-keyword">let</span> c1=<span class="hljs-keyword">new</span> Customer(<span class="hljs-keyword">new</span> Normal());
<span class="hljs-built_in">console</span>.log(c1.cost(<span class="hljs-number">100</span>));
c1.kind=<span class="hljs-keyword">new</span> Member();
<span class="hljs-built_in">console</span>.log(c1.cost(<span class="hljs-number">100</span>));
c1.kind=<span class="hljs-keyword">new</span> VIP();
<span class="hljs-built_in">console</span>.log(c1.cost(<span class="hljs-number">100</span>));
</code></pre>
<p>&#x628A;&#x7B97;&#x6CD5;&#x5C01;&#x88C5;&#x5728;&#x7B56;&#x7565;&#x5BF9;&#x8C61;&#x4E2D;&#xFF0C;&#x6307;&#x5B9A;&#x7B97;&#x6CD5;&#x8C03;&#x7528;&#x5373;&#x53EF;</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Customer</span></span>{
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.kinds={
            <span class="hljs-attr">normal</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">price</span>) </span>{
                <span class="hljs-keyword">return</span> price;
            },
            <span class="hljs-attr">member</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">price</span>) </span>{
                <span class="hljs-keyword">return</span> price*<span class="hljs-number">.9</span>;
            },
            <span class="hljs-attr">vip</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">price</span>) </span>{
                <span class="hljs-keyword">return</span> price*<span class="hljs-number">.8</span>;
            }
        }
    }
    cost(kind,amount) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.kinds[kind](amount);
    }
}
<span class="hljs-keyword">let</span> c=<span class="hljs-keyword">new</span> Customer();
<span class="hljs-built_in">console</span>.log(c.cost(<span class="hljs-string">&apos;normal&apos;</span>,<span class="hljs-number">100</span>));
<span class="hljs-built_in">console</span>.log(c.cost(<span class="hljs-string">&apos;member&apos;</span>,<span class="hljs-number">100</span>));
<span class="hljs-built_in">console</span>.log(c.cost(<span class="hljs-string">&apos;vip&apos;</span>,<span class="hljs-number">100</span>));
</code></pre>
<h3 id="t12913.3 &#x5E94;&#x7528;&#x573A;&#x666F;">13.3 &#x5E94;&#x7528;&#x573A;&#x666F; <a href="#t12913.3 &#x5E94;&#x7528;&#x573A;&#x666F;"> # </a></h3>
<h4 id="t13013.3.1 animate">13.3.1 animate <a href="#t13013.3.1 animate"> # </a></h4>
<ul>
<li>animate() &#x65B9;&#x6CD5;&#x6267;&#x884C; CSS &#x5C5E;&#x6027;&#x96C6;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;&#x3002;</li>
<li>&#x8BE5;&#x65B9;&#x6CD5;&#x901A;&#x8FC7;CSS&#x6837;&#x5F0F;&#x5C06;&#x5143;&#x7D20;&#x4ECE;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x6539;&#x53D8;&#x4E3A;&#x53E6;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x3002;CSS&#x5C5E;&#x6027;&#x503C;&#x662F;&#x9010;&#x6E10;&#x6539;&#x53D8;&#x7684;&#xFF0C;&#x8FD9;&#x6837;&#x5C31;&#x53EF;&#x4EE5;&#x521B;&#x5EFA;&#x52A8;&#x753B;&#x6548;&#x679C;&#x3002;</li>
<li><code>$(selector).animate(styles,speed,easing,callback)</code><ul>
<li>swing &#x52A8;&#x753B;&#x7684;&#x5F00;&#x59CB;&#x53D8;&#x5F97;&#x66F4;&#x52A0;&#x5FEB;&#x4E00;&#x4E9B;&#xFF0C;&#x7136;&#x540E;&#x518D;&#x6162;&#x4E0B;&#x6765;</li>
<li>linear &#x65B9;&#x6CD5;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x7A33;&#x5B9A;&#x7684;&#x52A8;&#x753B;&#xFF0C;&#x4EE5;&#x4F7F;&#x5F97;&#x52A8;&#x753B;&#x7684;&#x6BCF;&#x4E2A;&#x6B65;&#x9AA4;&#x90FD;&#x662F;&#x76F8;&#x540C;&#x7684;</li>
</ul>
</li>
</ul>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
      <span class="hljs-selector-id">#content</span>{
          <span class="hljs-attribute">width</span>:<span class="hljs-number">100px</span>;
          <span class="hljs-attribute">height</span>:<span class="hljs-number">100px</span>;
          <span class="hljs-attribute">background-color</span>:green;
      }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;bigger&quot;</span>&gt;</span>&#x53D8;&#x5927;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
$(<span class="hljs-string">&apos;#bigger&apos;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    $(<span class="hljs-string">&apos;#content&apos;</span>).animate({<span class="hljs-attr">width</span>:<span class="hljs-string">&apos;200px&apos;</span>,<span class="hljs-attr">height</span>:<span class="hljs-string">&apos;200px&apos;</span>},<span class="hljs-number">1000</span>,<span class="hljs-string">&apos;linear&apos;</span>);
});
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h4 id="t13113.3.2 &#x8868;&#x5355;&#x6821;&#x9A8C;">13.3.2 &#x8868;&#x5355;&#x6821;&#x9A8C; <a href="#t13113.3.2 &#x8868;&#x5355;&#x6821;&#x9A8C;"> # </a></h4>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">form</span>  <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;userform&quot;</span>&gt;</span>
      &#x7528;&#x6237;&#x540D; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span>/&gt;</span>
      &#x5BC6;&#x7801; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;password&quot;</span>/&gt;</span>
      &#x624B;&#x673A;&#x53F7; <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;mobile&quot;</span>/&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">let</span> Validator = (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">let</span> rules = {
        notEmpty(val,msg){
            <span class="hljs-keyword">if</span>(val == <span class="hljs-string">&apos;&apos;</span>){
                <span class="hljs-keyword">return</span> msg;
            }
        },
        minLength(val,length,msg){
            <span class="hljs-keyword">if</span>(val==<span class="hljs-string">&apos;&apos;</span>||val.length &lt;length){
                <span class="hljs-keyword">return</span> msg;
            }
        },
        maxLength(val,length,msg){
            <span class="hljs-keyword">if</span>(val==<span class="hljs-string">&apos;&apos;</span>||val.length &gt; length){
                <span class="hljs-keyword">return</span> msg;
            }
        },
        isMobile(val,msg){
            <span class="hljs-keyword">if</span>(!<span class="hljs-regexp">/^1\d{10}/</span>.test(val)){
                <span class="hljs-keyword">return</span> msg;
            }
        }
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addRule</span>(<span class="hljs-params">name,rule</span>)</span>{
        rules[name] = rule;
    }
    <span class="hljs-keyword">let</span> checks = [];
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">element,rule</span>)</span>{
        checks.push(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">let</span> name = rule.shift();
            rule.unshift(element.value);
            <span class="hljs-keyword">return</span> rules[name]&amp;&amp;rules[name].apply(element,rule);
        });
    }
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">start</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;checks.length;i++){
            <span class="hljs-keyword">let</span> check = checks[i];
            <span class="hljs-keyword">let</span> msg = check();
            <span class="hljs-keyword">if</span>(msg){
                <span class="hljs-keyword">return</span> msg;
            }
        }
    }
    <span class="hljs-keyword">return</span> {
        add,
        start,
        addRule
    }
})();

<span class="hljs-keyword">let</span> form = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;userform&apos;</span>);
form.onsubmit = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    Validator.add(form.username,[<span class="hljs-string">&apos;notEmpty&apos;</span>,<span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&#x4E0D;&#x80FD;&#x4E3A;&#x7A7A;&apos;</span>]);
    Validator.add(form.password,[<span class="hljs-string">&apos;minLength&apos;</span>,<span class="hljs-number">6</span>,<span class="hljs-string">&apos;&#x5BC6;&#x7801;&#x5C0F;&#x4E8E;6&#x4F4D;&#x6700;&#x5C11;&#x957F;&#x5EA6;&apos;</span>]);
    Validator.add(form.password,[<span class="hljs-string">&apos;maxLength&apos;</span>,<span class="hljs-number">8</span>,<span class="hljs-string">&apos;&#x5BC6;&#x7801;&#x5927;&#x4E8E;8&#x4F4D;&#x6700;&#x5927;&#x957F;&#x5EA6;&apos;</span>]);
    Validator.add(form.mobile,[<span class="hljs-string">&apos;isMobile&apos;</span>,<span class="hljs-string">&apos;&#x624B;&#x673A;&#x53F7;&#x4E0D;&#x5408;&#x6CD5;&apos;</span>]);
    <span class="hljs-keyword">let</span> msg =   Validator.start();
    <span class="hljs-keyword">if</span>(msg) {
        alert(msg);
        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
    }
    alert(<span class="hljs-string">&apos;&#x6821;&#x9A8C;&#x901A;&#x8FC7;&apos;</span>);
    <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<ul>
<li>&#x7B56;&#x7565;&#x6A21;&#x5F0F;&#x548C;&#x72B6;&#x6001;&#x6A21;&#x5F0F;&#x90FD;&#x6709;&#x4E0A;&#x4E0B;&#x6587;&#xFF0C;&#x6709;&#x7B56;&#x7565;&#x6216;&#x8005;&#x72B6;&#x6001;&#x7C7B;&#xFF0C;&#x4E0A;&#x4E0B;&#x6587;&#x628A;&#x8FD9;&#x4E9B;&#x8BF7;&#x6C42;&#x59D4;&#x6258;&#x7ED9;&#x8FD9;&#x4E9B;&#x7C7B;&#x6765;&#x6267;&#x884C;</li>
<li>&#x7B56;&#x7565;&#x6A21;&#x5F0F;&#x4E2D;&#x5404;&#x4E2A;&#x7C7B;&#x662F;&#x5E73;&#x7B49;&#x7684;&#xFF0C;&#x6CA1;&#x6709;&#x5173;&#x7CFB;&#xFF0C;&#x5BA2;&#x6237;&#x7AEF;&#x9700;&#x8981;&#x77E5;&#x9053;&#x7B97;&#x6CD5;&#x4E3B;&#x52A8;&#x5207;&#x6362;&#xFF0C;&#x72B6;&#x6001;&#x6A21;&#x5F0F;&#x4E2D;&#xFF0C;&#x72B6;&#x6001;&#x7684;&#x5207;&#x6362;&#x548C;&#x884C;&#x4E3A;&#x88AB;&#x5C01;&#x88C5;&#x597D;&#x4E86;&#xFF0C;&#x5BA2;&#x6237;&#x4E0D;&#x9700;&#x8981;&#x4E86;&#x89E3;&#x7EC6;&#x8282;&#x3002;</li>
</ul>
<h2 id="t13214. &#x539F;&#x578B;&#x6A21;&#x5F0F;">14. &#x539F;&#x578B;&#x6A21;&#x5F0F; <a href="#t13214. &#x539F;&#x578B;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x539F;&#x578B;&#x6A21;&#x5F0F;&#x662F;&#x4E00;&#x4E2A;&#x521B;&#x5EFA;&#x578B;&#x7684;&#x6A21;&#x5F0F;</li>
<li>&#x521B;&#x5EFA;&#x57FA;&#x7C7B;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x7B80;&#x5355;&#x5DEE;&#x5F02;&#x5316;&#x7684;&#x5C5E;&#x6027;&#x653E;&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#xFF0C;&#x6D88;&#x8017;&#x8D44;&#x6E90;&#x76F8;&#x540C;&#x7684;&#x529F;&#x80FD;&#x653E;&#x5728;&#x57FA;&#x7C7B;&#x539F;&#x578B;&#x4E2D;</li>
</ul>
<h3 id="t13314.1 &#x7C7B;&#x56FE;">14.1 &#x7C7B;&#x56FE; <a href="#t13314.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_40ff81b7_1720749.jpeg" alt="myprototype"></p>
<h3 id="t13414.2 &#x4EE3;&#x7801;">14.2 &#x4EE3;&#x7801; <a href="#t13414.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params">name</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
    <span class="hljs-keyword">this</span>.getName=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
    }
}
<span class="hljs-keyword">let</span> p1 = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">&apos;&#x5F20;&#x4E09;&apos;</span>);
<span class="hljs-keyword">let</span> p2=<span class="hljs-keyword">new</span> Person(<span class="hljs-string">&apos;&#x674E;&#x56DB;&apos;</span>);
<span class="hljs-built_in">console</span>.log(p1.getName===p2.getName);
</code></pre>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params">name</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
}
Person.prototype.getName = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name);
}
<span class="hljs-keyword">let</span> p1 = <span class="hljs-keyword">new</span> Person(<span class="hljs-string">&apos;&#x5F20;&#x4E09;&apos;</span>);
<span class="hljs-keyword">let</span> p2=<span class="hljs-keyword">new</span> Person(<span class="hljs-string">&apos;&#x674E;&#x56DB;&apos;</span>);
<span class="hljs-built_in">console</span>.log(p1.getName===p2.getName);
</code></pre>
<h3 id="t13514.3 JavaScript&#x4E2D;&#x7684;&#x539F;&#x578B;">14.3 JavaScript&#x4E2D;&#x7684;&#x539F;&#x578B; <a href="#t13514.3 JavaScript&#x4E2D;&#x7684;&#x539F;&#x578B;"> # </a></h3>
<h4 id="t13614.3.1 &#x51FD;&#x6570;&#x548C;&#x5BF9;&#x8C61;">14.3.1 &#x51FD;&#x6570;&#x548C;&#x5BF9;&#x8C61; <a href="#t13614.3.1 &#x51FD;&#x6570;&#x548C;&#x5BF9;&#x8C61;"> # </a></h4>
<ul>
<li>&#x51FD;&#x6570;&#x662F;&#x4E00;&#x79CD;&#x5BF9;&#x8C61;</li>
<li>&#x5BF9;&#x8C61;&#x90FD;&#x662F;&#x901A;&#x8FC7;&#x51FD;&#x6570;&#x521B;&#x5EFA;&#x7684;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">//&#x51FD;&#x6570;&#x662F;&#x4E00;&#x79CD;&#x5BF9;&#x8C61;</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params"></span>) </span>{}
<span class="hljs-built_in">console</span>.log(Person <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Object</span>);

<span class="hljs-comment">//&#x5BF9;&#x8C61;&#x90FD;&#x662F;&#x901A;&#x8FC7;&#x51FD;&#x6570;&#x521B;&#x5EFA;&#x7684;</span>
<span class="hljs-keyword">let</span> p1=<span class="hljs-keyword">new</span> Person();
<span class="hljs-keyword">let</span> obj1={<span class="hljs-attr">name</span>: <span class="hljs-string">&apos;zfpx&apos;</span>}
<span class="hljs-keyword">let</span> obj=<span class="hljs-keyword">new</span> <span class="hljs-built_in">Object</span>();
obj2.name=<span class="hljs-string">&apos;zfpx&apos;</span>;
</code></pre>
<h4 id="t13714.3.2 prototype">14.3.2 prototype <a href="#t13714.3.2 prototype"> # </a></h4>
<ul>
<li>&#x6BCF;&#x4E2A;&#x51FD;&#x6570;&#x90FD;&#x6709;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#x53EB;&#x505A;<code>prototype</code></li>
<li><code>prototype</code>&#x7684;&#x5C5E;&#x6027;&#x503C;&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;,&#x9ED8;&#x8BA4;&#x7684;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x53EB;&#x505A;<code>constructor</code>&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x6307;&#x5411;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x672C;&#x8EAB;</li>
<li>&#x6BCF;&#x4E2A;&#x5BF9;&#x8C61;&#x90FD;&#x6709;&#x4E00;&#x4E2A;&#x9690;&#x85CF;&#x7684;&#x5C5E;&#x6027;<code>__proto__</code>,&#x8FD9;&#x4E2A;&#x5C5E;&#x6027;&#x5F15;&#x7528;&#x4E86;&#x521B;&#x5EFA;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x7684;&#x51FD;&#x6570;&#x7684;<code>prototype</code></li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_82db32b7_1720749.png" alt="__proto__"></p>
<ul>
<li>&#x81EA;&#x5B9A;&#x4E49;&#x51FD;&#x6570;&#x7684;prototype&#x662F;&#x7531;Object&#x521B;&#x5EFA;&#xFF0C;&#x6240;&#x4EE5;&#x5B83;&#x7684;<strong>proto</strong>&#x6307;&#x5411;&#x7684;&#x5C31;&#x662F;Object.prototype</li>
<li>Object.prototype&#x7684;<strong>proto</strong>&#x6307;&#x5411;&#x7684;&#x662F;null</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192758_c8e0b1cf_1720749.png" alt="object.prototype"></p>
<ul>
<li>&#x81EA;&#x5B9A;&#x4E49;&#x51FD;&#x6570;<code>Foo.__proto__</code>&#x6307;&#x5411;Function.prototype</li>
<li><code>Object.__proto__</code>&#x6307;&#x5411;Function.prototype</li>
<li><code>Function.__proto__</code>&#x6307;&#x5411;Function.prototype<pre><code class="lang-js"><span class="hljs-keyword">let</span> sum = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Function</span>(<span class="hljs-string">&apos;a&apos;</span>,<span class="hljs-string">&apos;b&apos;</span>,<span class="hljs-string">&apos;return a+b&apos;</span>);
</code></pre>
</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_01cd602d_1720749.png" alt="function.prototype"></p>
<ul>
<li>Function.prototype&#x7684;<strong>proto</strong>&#x4E5F;&#x6307;&#x5411;Object.prototype</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_a5a04401_1720749.png" alt="function.prototype.__proto__"></p>
<h4 id="t13814.3.3 instanceof">14.3.3 instanceof <a href="#t13814.3.3 instanceof"> # </a></h4>
<ul>
<li>Instanceof&#x8FD0;&#x7B97;&#x7B26;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x6682;&#x65F6;&#x79F0;&#x4E3A;A&#xFF1B;&#x7B2C;&#x4E8C;&#x4E2A;&#x53D8;&#x91CF;&#x4E00;&#x822C;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x6682;&#x65F6;&#x79F0;&#x4E3A;B</li>
<li>Instanceof&#x7684;&#x5224;&#x65AD;&#x89C4;&#x5219;&#x662F;&#xFF1A;&#x6CBF;&#x7740;A&#x7684;<code>__proto__</code>&#x8FD9;&#x6761;&#x7EBF;&#x6765;&#x627E;&#xFF0C;&#x540C;&#x65F6;&#x6CBF;&#x7740;B&#x7684;<code>prototype</code>&#x8FD9;&#x6761;&#x7EBF;&#x6765;&#x627E;&#xFF0C;&#x5982;&#x679C;&#x4E24;&#x6761;&#x7EBF;&#x80FD;&#x627E;&#x5230;&#x540C;&#x4E00;&#x4E2A;&#x5F15;&#x7528;&#xFF0C;&#x5373;&#x540C;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x90A3;&#x4E48;&#x5C31;&#x8FD4;&#x56DE;<code>true</code>&#x3002;&#x5982;&#x679C;&#x627E;&#x5230;&#x7EC8;&#x70B9;&#x8FD8;&#x672A;&#x91CD;&#x5408;&#xFF0C;&#x5219;&#x8FD4;&#x56DE;<code>false</code>&#x3002;<pre><code class="lang-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Object</span> <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Function</span>);
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Function</span> <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Object</span>);
<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">Function</span> <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Function</span>);
</code></pre>
</li>
</ul>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_a727097d_1720749.png" alt="fullprototype"></p>
<h4 id="t13914.3.4 &#x539F;&#x578B;&#x94FE;">14.3.4 &#x539F;&#x578B;&#x94FE; <a href="#t13914.3.4 &#x539F;&#x578B;&#x94FE;"> # </a></h4>
<ul>
<li>&#x8BBF;&#x95EE;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;&#x65F6;&#xFF0C;&#x5148;&#x5728;&#x57FA;&#x672C;&#x5C5E;&#x6027;&#x4E2D;&#x67E5;&#x627E;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x6709;&#xFF0C;&#x518D;&#x6CBF;&#x7740;<strong>proto</strong>&#x8FD9;&#x6761;&#x94FE;&#x5411;&#x4E0A;&#x627E;&#xFF0C;&#x8FD9;&#x5C31;&#x662F;&#x539F;&#x578B;&#x94FE;</li>
<li><code>hasOwnProperty</code>&#x53EF;&#x4EE5;&#x533A;&#x5206;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#x5230;&#x5E95;&#x662F;&#x81EA;&#x5DF1;&#x7684;&#x8FD8;&#x662F;&#x4ECE;&#x539F;&#x578B;&#x4E2D;&#x627E;&#x5230;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Foo</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">this</span>.a = <span class="hljs-number">10</span>;
}
Foo.prototype.b = <span class="hljs-number">20</span>;

<span class="hljs-keyword">let</span> f1  = <span class="hljs-keyword">new</span> Foo();
<span class="hljs-built_in">console</span>.log(f1.a);
<span class="hljs-built_in">console</span>.log(f1.b);
</code></pre>
<h4 id="t14014.3.5 &#x539F;&#x578B;&#x4F18;&#x52BF;">14.3.5 &#x539F;&#x578B;&#x4F18;&#x52BF; <a href="#t14014.3.5 &#x539F;&#x578B;&#x4F18;&#x52BF;"> # </a></h4>
<ul>
<li>&#x53EF;&#x4EE5;&#x968F;&#x610F;&#x6269;&#x5C55;</li>
<li>&#x53EF;&#x4EE5;&#x91CD;&#x5199;&#x7EE7;&#x627F;&#x7684;&#x65B9;&#x6CD5;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> obj = {};
<span class="hljs-built_in">console</span>.log(obj.toString());
<span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>];
<span class="hljs-built_in">console</span>.log(arr.toString());
</code></pre>
<h3 id="t14114.4 &#x573A;&#x666F;">14.4 &#x573A;&#x666F; <a href="#t14114.4 &#x573A;&#x666F;"> # </a></h3>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
        * {
            <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>;
            <span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span>;
        }
        <span class="hljs-selector-tag">canvas</span>{
            <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#000</span>;
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;canvas&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;1000&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;600&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
    <span class="hljs-comment">//&#x968F;&#x673A;&#x989C;&#x8272;&#xFF0C;&#x5341;&#x516D;&#x8FDB;&#x5236;&#x65B9;&#x6CD5;&#xFF1B;</span>
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getRandomColor</span>(<span class="hljs-params"> </span>) </span>{
          <span class="hljs-keyword">var</span> rand = <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random( ) * <span class="hljs-number">0xFFFFFF</span>).toString(<span class="hljs-number">16</span>);
          <span class="hljs-keyword">if</span>(rand.length == <span class="hljs-number">6</span>){        
            <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;#&apos;</span>+rand;
          }<span class="hljs-keyword">else</span>{
            <span class="hljs-keyword">return</span> getRandomColor();
          }
        }
        <span class="hljs-keyword">let</span> canvas = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;canvas&apos;</span>);
        <span class="hljs-keyword">let</span> ctx = canvas.getContext(<span class="hljs-string">&apos;2d&apos;</span>);
        <span class="hljs-keyword">let</span> circles = [];
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Circle</span>(<span class="hljs-params">x,y,radius</span>)</span>{
                <span class="hljs-keyword">this</span>.x=x;
                <span class="hljs-keyword">this</span>.y=y;
                <span class="hljs-keyword">this</span>.radius= radius;
                circles.push(<span class="hljs-keyword">this</span>);
        }
        Circle.prototype.update = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
                <span class="hljs-keyword">this</span>.radius--;
                <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.radius&gt;<span class="hljs-number">0</span>){
                    <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
                }
        }
        Circle.prototype.render = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            ctx.beginPath();
            ctx.arc(<span class="hljs-keyword">this</span>.x,<span class="hljs-keyword">this</span>.y,<span class="hljs-keyword">this</span>.radius,<span class="hljs-number">0</span>,<span class="hljs-number">2</span>*<span class="hljs-built_in">Math</span>.PI);
            ctx.fillStyle = getRandomColor();
            ctx.fill();
        }

        <span class="hljs-keyword">let</span> circle = <span class="hljs-keyword">new</span> Circle(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">30</span>);
        canvas.onmousemove = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
            circles.push(<span class="hljs-keyword">new</span> Circle(event.clientX,event.clientY,<span class="hljs-number">30</span>));
        }
        setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            ctx.clearRect(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">1000</span>,<span class="hljs-number">600</span>);
            circles.forEach(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>{
                item.update()&amp;&amp;item.render(); 
            });
            circles = circles.filter(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.radius&gt;<span class="hljs-number">0</span>);
        },<span class="hljs-number">20</span>);
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h2 id="t14215. &#x6865;&#x63A5;&#x6A21;&#x5F0F;">15. &#x6865;&#x63A5;&#x6A21;&#x5F0F; <a href="#t14215. &#x6865;&#x63A5;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x5C06;&#x62BD;&#x8C61;&#x90E8;&#x5206;&#x4E0E;&#x4ED6;&#x7684;&#x5B9E;&#x73B0;&#x90E8;&#x5206;&#x5206;&#x79BB;,&#x8FD9;&#x6837;&#x62BD;&#x8C61;&#x5316;&#x4E0E;&#x5B9E;&#x73B0;&#x5316;&#x89E3;&#x8026;,&#x4F7F;&#x4ED6;&#x4EEC;&#x53EF;&#x4EE5;&#x72EC;&#x7ACB;&#x7684;&#x53D8;&#x5316;</li>
<li>&#x5E94;&#x7528;&#x573A;&#x666F;&#x662F;&#x5B9E;&#x73B0;&#x7CFB;&#x7EDF;&#x53EF;&#x80FD;&#x6709;&#x591A;&#x4E2A;&#x89D2;&#x5EA6;&#x5206;&#x7C7B;,&#x6BCF;&#x4E00;&#x79CD;&#x89D2;&#x5EA6;&#x90FD;&#x53EF;&#x80FD;&#x53D8;&#x5316;.</li>
<li>&#x6865;&#x65B9;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x5B9E;&#x73B0;&#x6865;&#x63A5;&#x53E3;&#x8FDB;&#x884C;&#x5355;&#x65B9;&#x9762;&#x6269;&#x5C55;&#xFF0C;&#x800C;&#x53E6;&#x4E00;&#x65B9;&#x53EF;&#x4EE5;&#x7EE7;&#x627F;&#x62BD;&#x8C61;&#x7C7B;&#x800C;&#x5355;&#x65B9;&#x9762;&#x6269;&#x5C55;&#xFF0C;&#x800C;&#x4E4B;&#x95F4;&#x7684;&#x8C03;&#x7528;&#x5C31;&#x4ECE;&#x6865;&#x63A5;&#x53E3;&#x6765;&#x4F5C;&#x4E3A;&#x7A81;&#x7834;&#x53E3;&#xFF0C;&#x4E0D;&#x4F1A;&#x53D7;&#x5230;&#x53CC;&#x65B9;&#x6269;&#x5C55;&#x7684;&#x4EFB;&#x4F55;&#x5F71;&#x54CD;</li>
</ul>
<h3 id="t14315.1 &#x7C7B;&#x56FE;">15.1 &#x7C7B;&#x56FE; <a href="#t14315.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_03de8d50_1720749.jpeg" alt="bridge"></p>
<h3 id="t14415.2 &#x4EE3;&#x7801;">15.2 &#x4EE3;&#x7801; <a href="#t14415.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A</span> </span>{
    <span class="hljs-keyword">constructor</span>(bridge) {
        <span class="hljs-keyword">this</span>.bridge=bridge;
    }
    go() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x4ECE;<span class="hljs-subst">${<span class="hljs-keyword">this</span>.<span class="hljs-keyword">from</span>()}</span>&#x5230;<span class="hljs-subst">${<span class="hljs-keyword">this</span>.bridge.to()}</span>`</span>);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A1</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">A</span> </span>{
    <span class="hljs-keyword">from</span>() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;A1&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A2</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">A</span> </span>{
    <span class="hljs-keyword">from</span>() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;A2&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A3</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">A</span> </span>{
    <span class="hljs-keyword">from</span>() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;A3&apos;</span>;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">B</span> </span>{
    to() {}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">B1</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">B</span> </span>{
    to() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;B1&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">B2</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">B</span> </span>{
    to() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;B2&apos;</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">B3</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">B</span> </span>{
    to() {
        <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;B3&apos;</span>;
    }
}
<span class="hljs-keyword">let</span> b=<span class="hljs-keyword">new</span> B3();
<span class="hljs-keyword">let</span> a=<span class="hljs-keyword">new</span> A2(b);
a.go();
</code></pre>
<h3 id="t14515.3 &#x5E94;&#x7528;&#x573A;&#x666F;">15.3 &#x5E94;&#x7528;&#x573A;&#x666F; <a href="#t14515.3 &#x5E94;&#x7528;&#x573A;&#x666F;"> # </a></h3>
<h4 id="t14615.3.1 &#x4E8B;&#x4EF6;&#x76D1;&#x542C;">15.3.1 &#x4E8B;&#x4EF6;&#x76D1;&#x542C; <a href="#t14615.3.1 &#x4E8B;&#x4EF6;&#x76D1;&#x542C;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
app.get(<span class="hljs-string">&apos;/&apos;</span>,(req,res) =&gt; {
    res.sendFile(path.join(__dirname,<span class="hljs-string">&apos;4.html&apos;</span>));
});
app.get(<span class="hljs-string">&apos;/user/:id&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    <span class="hljs-keyword">let</span> id = req.params.id;
    res.json({id,<span class="hljs-attr">name</span>:<span class="hljs-string">`<span class="hljs-subst">${id}</span>_name`</span>});
});
app.listen(<span class="hljs-number">8888</span>);
</code></pre>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>bridage<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">&quot;1&quot;</span> &gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">&quot;2&quot;</span> &gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">let</span> lis = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&apos;li&apos;</span>);
  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;lis.length;i++){
      lis[i].addEventListener(<span class="hljs-string">&apos;click&apos;</span>,getUserById);
  }
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserById</span>(<span class="hljs-params">event</span>)</span>{
      <span class="hljs-keyword">let</span> id = <span class="hljs-keyword">this</span>.dataset.id;
      <span class="hljs-keyword">let</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
      xhr.open(<span class="hljs-string">&apos;GET&apos;</span>,<span class="hljs-string">`/user/<span class="hljs-subst">${id}</span>`</span>,<span class="hljs-literal">true</span>);
      xhr.responseType = <span class="hljs-string">&apos;json&apos;</span>;
      xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">if</span>(xhr.readyState ===<span class="hljs-number">4</span> &amp;&amp; xhr.status == <span class="hljs-number">200</span>){
            <span class="hljs-keyword">let</span> user = xhr.response;
            <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;content&apos;</span>).innerHTML = user.name;
          }
      }
      xhr.send();
  }

  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserById</span>(<span class="hljs-params">id,callback</span>)</span>{
      <span class="hljs-keyword">let</span> id = <span class="hljs-keyword">this</span>.dataset.id;
      <span class="hljs-keyword">let</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
      xhr.open(<span class="hljs-string">&apos;GET&apos;</span>,<span class="hljs-string">`/user/<span class="hljs-subst">${id}</span>`</span>,<span class="hljs-literal">true</span>);
      xhr.responseType = <span class="hljs-string">&apos;json&apos;</span>;
      xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">if</span>(xhr.readyState ===<span class="hljs-number">4</span> &amp;&amp; xhr.status == <span class="hljs-number">200</span>){
            <span class="hljs-keyword">let</span> user = xhr.response;
            <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;content&apos;</span>).innerHTML = user.name;
          }
      }
      xhr.send();
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">&quot;1&quot;</span> &gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">&quot;2&quot;</span> &gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>

    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">let</span> lis = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&apos;li&apos;</span>);
  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;lis.length;i++){
      lis[i].addEventListener(<span class="hljs-string">&apos;click&apos;</span>,addBridage);
  }
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserById</span>(<span class="hljs-params">event</span>)</span>{
      <span class="hljs-keyword">let</span> id = <span class="hljs-keyword">this</span>.dataset.id;
      <span class="hljs-keyword">let</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
      xhr.open(<span class="hljs-string">&apos;GET&apos;</span>,<span class="hljs-string">`/user/<span class="hljs-subst">${id}</span>`</span>,<span class="hljs-literal">true</span>);
      xhr.responseType = <span class="hljs-string">&apos;json&apos;</span>;
      xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">if</span>(xhr.readyState ===<span class="hljs-number">4</span> &amp;&amp; xhr.status == <span class="hljs-number">200</span>){
            <span class="hljs-keyword">let</span> user = xhr.response;
             <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;content&apos;</span>).innerHTML = user.name;
          }
      }
      xhr.send();
  }

  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addBridage</span>(<span class="hljs-params"></span>)</span>{
      <span class="hljs-keyword">let</span> id = <span class="hljs-keyword">this</span>.dataset.id;
      getUserById(id,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">user</span>)</span>{
         <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;content&apos;</span>).innerHTML = user.name;
      });
  }

  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserById</span>(<span class="hljs-params">id,callback</span>)</span>{
      <span class="hljs-keyword">let</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest;
      xhr.open(<span class="hljs-string">&apos;GET&apos;</span>,<span class="hljs-string">`/user/<span class="hljs-subst">${id}</span>`</span>,<span class="hljs-literal">true</span>);
      xhr.responseType = <span class="hljs-string">&apos;json&apos;</span>;
      xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">if</span>(xhr.readyState ===<span class="hljs-number">4</span> &amp;&amp; xhr.status == <span class="hljs-number">200</span>){
            <span class="hljs-keyword">let</span> user = xhr.response;
            callback(user);
          }
      }
      xhr.send();
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h4 id="t14715.3.2 &#x5206;&#x79BB;&#x53D8;&#x5316;">15.3.2 &#x5206;&#x79BB;&#x53D8;&#x5316; <a href="#t14715.3.2 &#x5206;&#x79BB;&#x53D8;&#x5316;"> # </a></h4>
<ul>
<li>&#x5206;&#x79BB;&#x591A;&#x7EF4;&#x53D8;&#x5316;</li>
</ul>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>html<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
        * {
            <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>;
            <span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span>;
        }
        <span class="hljs-selector-tag">canvas</span>{
            <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#000</span>;
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;canvas&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;600&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;600&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-comment">//&#x5F62;&#x72B6; &#x989C;&#x8272; &#x5750;&#x6807;</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Position</span>(<span class="hljs-params">x,y</span>) </span>{
  <span class="hljs-keyword">this</span>.x=x;
  <span class="hljs-keyword">this</span>.y=y;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Color</span>(<span class="hljs-params">color</span>) </span>{
    <span class="hljs-keyword">this</span>.color=color;
}


<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Ball</span>(<span class="hljs-params">x,y,color</span>) </span>{
    <span class="hljs-keyword">this</span>.position=<span class="hljs-keyword">new</span> Position(x,y);
    <span class="hljs-keyword">this</span>.color=<span class="hljs-keyword">new</span> Color(color);
}
Ball.prototype.draw=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> canvas = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;canvas&apos;</span>);
  <span class="hljs-keyword">let</span> ctx = canvas.getContext(<span class="hljs-string">&apos;2d&apos;</span>);
  ctx.beginPath();
  ctx.arc(<span class="hljs-keyword">this</span>.position.x,<span class="hljs-keyword">this</span>.position.y,<span class="hljs-number">100</span>,<span class="hljs-number">0</span>,<span class="hljs-number">2</span>*<span class="hljs-built_in">Math</span>.PI);
  ctx.fillStyle = <span class="hljs-keyword">this</span>.color.color;
  ctx.fill();
}
<span class="hljs-keyword">new</span> Ball(<span class="hljs-number">300</span>,<span class="hljs-number">300</span>,<span class="hljs-string">&apos;red&apos;</span>).draw();
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h2 id="t14816. &#x7EC4;&#x5408;&#x6A21;&#x5F0F;">16. &#x7EC4;&#x5408;&#x6A21;&#x5F0F; <a href="#t14816. &#x7EC4;&#x5408;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x53C8;&#x79F0;&#x6574;&#x4F53;-&#x90E8;&#x5206;&#x6A21;&#x5F0F;</li>
<li>&#x5C06;&#x5BF9;&#x8C61;&#x7EC4;&#x5408;&#x6210;&#x6811;&#x5F62;&#x7ED3;&#x6784;&#x4EE5;&#x8868;&#x793A;&#x90E8;&#x5206;-&#x6574;&#x4F53;&#x7684;&#x5C42;&#x6B21;&#x7ED3;&#x6784;</li>
<li>&#x5BA2;&#x6237;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x7EDF;&#x4E00;&#x7684;&#x65B9;&#x5F0F;&#x5BF9;&#x5F85;&#x7EC4;&#x5408;&#x5BF9;&#x8C61;&#x548C;&#x53F6;&#x5B50;&#x5BF9;&#x8C61;</li>
</ul>
<h3 id="t14916.1 &#x7C7B;&#x56FE;">16.1 &#x7C7B;&#x56FE; <a href="#t14916.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_5fb1222e_1720749.jpeg" alt="compose"></p>
<h3 id="t15016.2 &#x4EE3;&#x7801;">16.2 &#x4EE3;&#x7801; <a href="#t15016.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
    <span class="hljs-selector-class">.red</span>{
        <span class="hljs-attribute">color</span>:red;
    }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;root&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>    
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ReactElement</span>(<span class="hljs-params">type,props</span>) </span>{
    <span class="hljs-keyword">this</span>.type = type;
    <span class="hljs-keyword">this</span>.props = props;
}
<span class="hljs-keyword">let</span> React = {
    createElement(type,props={},...childrens){
        childrens.length===<span class="hljs-number">1</span>?childrens = childrens[<span class="hljs-number">0</span>]:<span class="hljs-keyword">void</span> <span class="hljs-number">0</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> ReactElement(type,{...props,<span class="hljs-attr">children</span>:childrens})
    }
};
<span class="hljs-keyword">let</span> render = <span class="hljs-function">(<span class="hljs-params">eleObj,container</span>)=&gt;</span>{
    <span class="hljs-comment">// &#x5148;&#x53D6;&#x51FA;&#x7B2C;&#x4E00;&#x5C42; &#x8FDB;&#x884C;&#x521B;&#x5EFA;&#x771F;&#x5B9E;dom</span>
    <span class="hljs-keyword">let</span> {type,props} = eleObj;
    <span class="hljs-keyword">let</span> elementNode = <span class="hljs-built_in">document</span>.createElement(type); <span class="hljs-comment">// &#x521B;&#x5EFA;&#x7B2C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;</span>
    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> attr <span class="hljs-keyword">in</span> props){ <span class="hljs-comment">// &#x5FAA;&#x73AF;&#x6240;&#x6709;&#x5C5E;&#x6027;</span>
        <span class="hljs-keyword">if</span>(attr === <span class="hljs-string">&apos;children&apos;</span>){ <span class="hljs-comment">// &#x5982;&#x679C;&#x662F;children&#x8868;&#x793A;&#x6709;&#x5D4C;&#x5957;&#x5173;&#x7CFB;</span>
            <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> props[attr] == <span class="hljs-string">&apos;object&apos;</span>){ <span class="hljs-comment">// &#x770B;&#x662F;&#x5426;&#x662F;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x6587;&#x672C;&#x8282;&#x70B9;</span>
                props[attr].forEach(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>{ <span class="hljs-comment">// &#x591A;&#x4E2A;&#x7684;&#x8BDD;&#x5FAA;&#x73AF;&#x5224;&#x65AD; &#x5982;&#x679C;&#x662F;&#x5BF9;&#x8C61;&#x518D;&#x6B21;&#x8C03;&#x7528;render&#x65B9;&#x6CD5;</span>
                    <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> item === <span class="hljs-string">&apos;object&apos;</span>){
                        render(item,elementNode)
                    }<span class="hljs-keyword">else</span>{ <span class="hljs-comment">//&#x662F;&#x6587;&#x672C;&#x8282;&#x70B9; &#x76F4;&#x63A5;&#x521B;&#x5EFA;&#x5373;&#x53EF;</span>
                        elementNode.appendChild(<span class="hljs-built_in">document</span>.createTextNode(item));
                    }
                })
            }<span class="hljs-keyword">else</span>{ <span class="hljs-comment">// &#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x6587;&#x672C;&#x8282;&#x70B9;&#x76F4;&#x63A5;&#x521B;&#x5EFA;&#x5373;&#x53EF;</span>
                elementNode.appendChild(<span class="hljs-built_in">document</span>.createTextNode(props[attr]));
            }
        }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(attr === <span class="hljs-string">&apos;className&apos;</span>){ <span class="hljs-comment">// &#x662F;&#x4E0D;&#x662F;class&#x5C5E;&#x6027; class &#x5C5E;&#x6027;&#x7279;&#x6B8A;&#x5904;&#x7406;</span>
            elementNode.setAttribute(<span class="hljs-string">&apos;class&apos;</span>,props[attr]);
        }<span class="hljs-keyword">else</span>{
            elementNode.setAttribute(attr,props[attr]);
        }
    }
    container.appendChild(elementNode)
};
<span class="hljs-comment">//ReactDOM.render(&lt;div&gt;hello&lt;span&gt;world&lt;/span&gt;&lt;/div&gt;);</span>
<span class="hljs-comment">//ReactDOM.render(React.createElement(&quot;div&quot;,null,&quot;hello,&quot;,React.createElement(&quot;span&quot;,null,&quot;world&quot;)));</span>
render(React.createElement(<span class="hljs-string">&quot;div&quot;</span>,<span class="hljs-literal">null</span>,<span class="hljs-string">&quot;hello,&quot;</span>,React.createElement(<span class="hljs-string">&quot;span&quot;</span>,{<span class="hljs-attr">class</span>:<span class="hljs-string">&quot;red&quot;</span>},<span class="hljs-string">&quot;world&quot;</span>)),<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;root&apos;</span>));

</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h3 id="t15116.3 &#x5E94;&#x7528;&#x573A;&#x666F;">16.3 &#x5E94;&#x7528;&#x573A;&#x666F; <a href="#t15116.3 &#x5E94;&#x7528;&#x573A;&#x666F;"> # </a></h3>
<h4 id="t15216.3.1 &#x6587;&#x4EF6;&#x5939;&#x548C;&#x6587;&#x4EF6;">16.3.1 &#x6587;&#x4EF6;&#x5939;&#x548C;&#x6587;&#x4EF6; <a href="#t15216.3.1 &#x6587;&#x4EF6;&#x5939;&#x548C;&#x6587;&#x4EF6;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Folder</span>(<span class="hljs-params">name</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
    <span class="hljs-keyword">this</span>.children=[];
    <span class="hljs-keyword">this</span>.parent=<span class="hljs-literal">null</span>;
    <span class="hljs-keyword">this</span>.level=<span class="hljs-number">0</span>;
}
Folder.prototype.add=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">child</span>) </span>{
    child.level=<span class="hljs-keyword">this</span>.level+<span class="hljs-number">1</span>;
    child.parent=<span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">this</span>.children.push(child);
}
Folder.prototype.show=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos; &apos;</span>.repeat(<span class="hljs-keyword">this</span>.level)+<span class="hljs-string">&apos;&#x6587;&#x4EF6;&#x5939;&apos;</span>+<span class="hljs-keyword">this</span>.name);
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-keyword">this</span>.children.length;i++){
        <span class="hljs-keyword">this</span>.children[i].show();
    }
}
Folder.prototype.remove=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.parent) <span class="hljs-keyword">return</span>;
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-keyword">this</span>.parent.children.length;i++){
        <span class="hljs-keyword">let</span> current=<span class="hljs-keyword">this</span>.parent.children[i];
        <span class="hljs-keyword">if</span> (current === <span class="hljs-keyword">this</span>) {
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.parent.children.splice(i,<span class="hljs-number">1</span>);
        }
    }
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">File</span>(<span class="hljs-params">name</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
}
File.prototype.add=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">`&#x6587;&#x4EF6;&#x4E0B;&#x9762;&#x4E0D;&#x80FD;&#x518D;&#x6DFB;&#x52A0;&#x6587;&#x4EF6;`</span>);
}
File.prototype.show=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos; &apos;</span>.repeat(<span class="hljs-keyword">this</span>.level)+<span class="hljs-string">&apos;&#x6587;&#x4EF6;&apos;</span>+<span class="hljs-keyword">this</span>.name);
}

<span class="hljs-keyword">let</span> folder=<span class="hljs-keyword">new</span> Folder(<span class="hljs-string">&apos;&#x89C6;&#x9891;&apos;</span>);
<span class="hljs-keyword">let</span> vueFolder=<span class="hljs-keyword">new</span> Folder(<span class="hljs-string">&apos;Vue&#x89C6;&#x9891;&apos;</span>);
<span class="hljs-keyword">let</span> reactFolder=<span class="hljs-keyword">new</span> Folder(<span class="hljs-string">&apos;React&#x89C6;&#x9891;&apos;</span>);
<span class="hljs-keyword">let</span> vueFile=<span class="hljs-keyword">new</span> File(<span class="hljs-string">&apos;Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x7CBE;&#x901A;&apos;</span>);
<span class="hljs-keyword">let</span> reactFile=<span class="hljs-keyword">new</span> File(<span class="hljs-string">&apos;React&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x7CBE;&#x901A;&apos;</span>);
folder.add(vueFolder);
folder.add(reactFolder);
vueFolder.add(vueFile);
reactFolder.add(reactFile);

folder.show();
vueFolder.remove();
folder.show();
</code></pre>
<h4 id="t15316.3.2 &#x7ED8;&#x5236;&#x8868;&#x5355;">16.3.2 &#x7ED8;&#x5236;&#x8868;&#x5355; <a href="#t15316.3.2 &#x7ED8;&#x5236;&#x8868;&#x5355;"> # </a></h4>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FormContainer</span> </span>{
    <span class="hljs-keyword">constructor</span>(type) {
        <span class="hljs-keyword">this</span>.element = <span class="hljs-built_in">document</span>.createElement(type);
        <span class="hljs-keyword">this</span>.children = [];
    }
    add(child) {
        <span class="hljs-keyword">this</span>.children.push(child);
        <span class="hljs-keyword">this</span>.element.appendChild(child.element);
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FieldContainer</span> </span>{
    <span class="hljs-keyword">constructor</span>(type) {
        <span class="hljs-keyword">this</span>.element = <span class="hljs-built_in">document</span>.createElement(type);
        <span class="hljs-keyword">this</span>.children = [];
    }
    add(child) {
        <span class="hljs-keyword">this</span>.children.push(child);
        <span class="hljs-keyword">this</span>.element.appendChild(child.element);
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LabelItem</span> </span>{
    <span class="hljs-keyword">constructor</span>(title) {
        <span class="hljs-keyword">this</span>.element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;label&apos;</span>);
        <span class="hljs-keyword">this</span>.element.innerHTML = title;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">InputItem</span> </span>{
    <span class="hljs-keyword">constructor</span>(title) {
        <span class="hljs-keyword">this</span>.element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;input&apos;</span>);
        <span class="hljs-keyword">this</span>.element.name = title;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TipItem</span> </span>{
    <span class="hljs-keyword">constructor</span>(title) {
        <span class="hljs-keyword">this</span>.element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;span&apos;</span>);
        <span class="hljs-keyword">this</span>.element.innerHTML = title;
    }
}
<span class="hljs-keyword">let</span> userform = <span class="hljs-keyword">new</span> FormContainer(<span class="hljs-string">&apos;form&apos;</span>).add(
    <span class="hljs-keyword">new</span> FieldContainer(<span class="hljs-string">&apos;p&apos;</span>).add(
        <span class="hljs-keyword">new</span> LabelItem(<span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>)
    ).add(
        <span class="hljs-keyword">new</span> InputItem(<span class="hljs-string">&apos;username&apos;</span>)
    ).add(
        <span class="hljs-keyword">new</span> TipItem(<span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&#x957F;&#x5EA6;&#x4E3A;6-8&#x4F4D;&apos;</span>)
    )
).add(<span class="hljs-keyword">new</span> FieldContainer(<span class="hljs-string">&apos;p&apos;</span>).add(
    <span class="hljs-keyword">new</span> LabelItem(<span class="hljs-string">&apos;&#x5BC6;&#x7801;&apos;</span>)
).add(
    <span class="hljs-keyword">new</span> InputItem(<span class="hljs-string">&apos;password&apos;</span>)
).add(
    <span class="hljs-keyword">new</span> TipItem(<span class="hljs-string">&apos;&#x786E;&#x8BA4;&#x5BC6;&#x7801;&apos;</span>)
));
<span class="hljs-built_in">document</span>.body.appendChild(userform.element);
</code></pre>
<h2 id="t15417. &#x547D;&#x4EE4;&#x6A21;&#x5F0F;">17. &#x547D;&#x4EE4;&#x6A21;&#x5F0F; <a href="#t15417. &#x547D;&#x4EE4;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x6267;&#x884C;&#x547D;&#x4EE4;&#x65F6;&#xFF0C;&#x53D1;&#x5E03;&#x8005;&#x548C;&#x6267;&#x884C;&#x8005;&#x5206;&#x5F00;</li>
<li>&#x4E2D;&#x95F4;&#x52A0;&#x5165;&#x547D;&#x4EE4;&#x5BF9;&#x8C61;&#xFF0C;&#x4F5C;&#x4E3A;&#x4E2D;&#x8F6C;&#x7AD9;</li>
</ul>
<p>&#x4E09;&#x79CD;&#x89D2;&#x8272;</p>
<ul>
<li><code>Receiver</code>&#x63A5;&#x53D7;&#x8005;&#x89D2;&#x8272;&#xFF1A;&#x8BE5;&#x89D2;&#x8272;&#x5C31;&#x662F;&#x5E72;&#x6D3B;&#x7684;&#x89D2;&#x8272;&#xFF0C;&#x547D;&#x4EE4;&#x4F20;&#x9012;&#x5230;&#x8FD9;&#x91CC;&#x662F;&#x5E94;&#x8BE5;&#x88AB;&#x6267;&#x884C;&#x7684;</li>
<li><code>Command</code>&#x547D;&#x4EE4;&#x89D2;&#x8272;&#xFF1A;&#x9700;&#x8981;&#x6267;&#x884C;&#x7684;&#x6240;&#x6709;&#x547D;&#x4EE4;&#x90FD;&#x5728;&#x8FD9;&#x91CC;&#x58F0;&#x660E;</li>
<li><code>Invoker</code>&#x8C03;&#x7528;&#x8005;&#x89D2;&#x8272;&#xFF1A;&#x63A5;&#x6536;&#x5230;&#x547D;&#x4EE4;&#xFF0C;&#x5E76;&#x6267;&#x884C;&#x547D;&#x4EE4;</li>
</ul>
<h3 id="t15517.1 &#x7C7B;&#x56FE;">17.1 &#x7C7B;&#x56FE; <a href="#t15517.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_3f5aa289_1720749.jpeg" alt="command"></p>
<h3 id="t15617.2 &#x4EE3;&#x7801;">17.2 &#x4EE3;&#x7801; <a href="#t15617.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cooker</span></span>{
    cook() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x505A;&#x996D;`</span>);    
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Cleaner</span></span>{
    clean() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x6E05;&#x6D01;`</span>);    
    }
}


<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CookCommand</span></span>{
    <span class="hljs-keyword">constructor</span>(cooker) {
        <span class="hljs-keyword">this</span>.cooker=cooker;
    }
    execute() {
        <span class="hljs-keyword">this</span>.cooker.cook();
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CleanCommand</span></span>{
    <span class="hljs-keyword">constructor</span>(cleaner) {
        <span class="hljs-keyword">this</span>.cleaner=cleaner;
    }
    execute() {
        <span class="hljs-keyword">this</span>.cleaner.clean();
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Customer</span></span>{
    <span class="hljs-keyword">constructor</span>(command) {
        <span class="hljs-keyword">this</span>.command=command;
    }
    cook() {
        <span class="hljs-keyword">this</span>.command.execute();
    }
    clean() {
        <span class="hljs-keyword">this</span>.command.execute();
    }
}
<span class="hljs-keyword">let</span> cooker=<span class="hljs-keyword">new</span> Cooker();
<span class="hljs-keyword">let</span> command=<span class="hljs-keyword">new</span> CookCommand(cooker);
<span class="hljs-keyword">let</span> c=<span class="hljs-keyword">new</span> Customer(command);
c.cook();
<span class="hljs-keyword">let</span> cleaner=<span class="hljs-keyword">new</span> Cleaner();
c.command = <span class="hljs-keyword">new</span> CleanCommand(cleaner);
c.clean();
</code></pre>
<h3 id="t15717.3 &#x5E94;&#x7528;&#x573A;&#x666F;">17.3 &#x5E94;&#x7528;&#x573A;&#x666F; <a href="#t15717.3 &#x5E94;&#x7528;&#x573A;&#x666F;"> # </a></h3>
<h4 id="t15817.3.1 &#x8BA1;&#x6570;&#x5668;">17.3.1 &#x8BA1;&#x6570;&#x5668; <a href="#t15817.3.1 &#x8BA1;&#x6570;&#x5668;"> # </a></h4>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>&#x8BA1;&#x6570;&#x5668;<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;number&quot;</span>&gt;</span>0<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;addBtn&quot;</span>&gt;</span>&#x70B9;&#x51FB;&#x6309;&#x94AE;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
 <span class="hljs-keyword">let</span> addBtn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;addBtn&apos;</span>);
 <span class="hljs-keyword">let</span> number = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;number&apos;</span>);

 <span class="hljs-keyword">let</span> worker = {
  add(){
   number.innerHTML = <span class="hljs-built_in">parseInt</span>(number.innerHTML)+<span class="hljs-number">1</span>;
  }
 }

 <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AddCommand</span></span>{
     <span class="hljs-keyword">constructor</span>(receiver){
         <span class="hljs-keyword">this</span>.receiver = receiver;
     }
     execute(){
         <span class="hljs-keyword">this</span>.receiver.add();
     }
 }

<span class="hljs-keyword">let</span> addCommand = <span class="hljs-keyword">new</span> AddCommand(worker);
addBtn.onclick = <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>addCommand.execute();
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h4 id="t15917.3.2 &#x64A4;&#x9500;&#x548C;&#x91CD;&#x505A;">17.3.2 &#x64A4;&#x9500;&#x548C;&#x91CD;&#x505A; <a href="#t15917.3.2 &#x64A4;&#x9500;&#x548C;&#x91CD;&#x505A;"> # </a></h4>
<pre><code class="lang-js">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;&#x5F39;&#x51FA;&#x83DC;&#x5355;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p id=&quot;number&quot;&gt;0&lt;/p&gt;
    &lt;button id=&quot;addBtn&quot;&gt;+&lt;/button&gt;
    &lt;button id=&quot;undoBtn&quot;&gt;undo&lt;/button&gt;
&lt;script&gt;
 let addBtn = document.getElementById(&apos;addBtn&apos;);
 let undoBtn = document.getElementById(&apos;undoBtn&apos;);
 let number = document.getElementById(&apos;number&apos;);

 let worker = {
  lastVal:-1,
  add(){
   let oldVal = parseInt(number.innerHTML);     
   worker.lastVal = oldVal; 
   number.innerHTML = oldVal+1;
  },
  undo(){
      number.innerHTML = worker.lastVal;
  }
 }

 class AddCommand{
     constructor(receiver){
         this.receiver = receiver;
     }
     execute(){
         this.receiver.add();
     }
 }

 let addCommand = new AddCommand(worker);
 class UndoCommand{
     constructor(receiver){
         this.receiver = receiver;
     }
     execute(){
         this.receiver.undo();
     }
 }

 let undoCommand = new UndoCommand(worker);
 addBtn.onclick = ()=&gt;addCommand.execute();
 undoBtn.onclick = ()=&gt;undoCommand.execute();
&lt;/script&gt;    
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h4 id="t16017.3.3 &#x591A;&#x6B65;&#x64A4;&#x9500;&#x548C;&#x91CD;&#x505A;">17.3.3 &#x591A;&#x6B65;&#x64A4;&#x9500;&#x548C;&#x91CD;&#x505A; <a href="#t16017.3.3 &#x591A;&#x6B65;&#x64A4;&#x9500;&#x548C;&#x91CD;&#x505A;"> # </a></h4>
<pre><code class="lang-js">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
    &lt;title&gt;&#x5F39;&#x51FA;&#x83DC;&#x5355;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;p id=&quot;number&quot;&gt;0&lt;/p&gt;
    &lt;button id=&quot;addBtn&quot;&gt;+&lt;/button&gt;
    &lt;button id=&quot;undoBtn&quot;&gt;undo&lt;/button&gt;
    &lt;button id=&quot;redoBtn&quot;&gt;undo&lt;/button&gt;
&lt;script&gt;
 let addBtn = document.getElementById(&apos;addBtn&apos;);
 let undoBtn = document.getElementById(&apos;undoBtn&apos;);
 let redoBtn = document.getElementById(&apos;redoBtn&apos;);
 let number = document.getElementById(&apos;number&apos;);

 let worker = {
  history:[],
  index:-1,
  add(){
   let oldVal = parseInt(number.innerHTML);     
   let newVal = oldVal + 1;
   worker.history.push(newVal);
   worker.index = worker.history.length-1;
   number.innerHTML = newVal;
   console.log(worker);
  },
  undo(){
      if(worker.index-1&gt;=0){
          worker.index--;
        number.innerHTML = worker.history[worker.index];
        console.log(worker);
      }
  },
  redo(){
      if(worker.index+1&lt;worker.history.length){
        worker.index++;  
        number.innerHTML = worker.history[worker.index];
        console.log(worker);
      }
  }
 }

 class AddCommand{
     constructor(receiver){
         this.receiver = receiver;
     }
     execute(){
         this.receiver.add();
     }
 }

 let addCommand = new AddCommand(worker);
 class UndoCommand{
     constructor(receiver){
         this.receiver = receiver;
     }
     execute(){
         this.receiver.undo();
     }
 }

 let undoCommand = new UndoCommand(worker);
 class RedoCommand{
     constructor(receiver){
         this.receiver = receiver;
     }
     execute(){
         this.receiver.redo();
     }
 }

let redoCommand = new RedoCommand(worker);
addBtn.onclick = ()=&gt;addCommand.execute();
undoBtn.onclick = ()=&gt;undoCommand.execute();
redoBtn.onclick = ()=&gt;redoCommand.execute();
&lt;/script&gt;    
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h2 id="t16118. &#x4EAB;&#x5143;&#x6A21;&#x5F0F;">18. &#x4EAB;&#x5143;&#x6A21;&#x5F0F; <a href="#t16118. &#x4EAB;&#x5143;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x5171;&#x4EAB;&#x5185;&#x5B58;&#xFF0C;&#x8282;&#x7EA6;&#x5185;&#x5B58;&#x7A7A;&#x95F4;</li>
<li>&#x76F8;&#x540C;&#x7684;&#x6570;&#x636E;&#x5171;&#x4EAB;&#x4F7F;&#x7528;</li>
<li>&#x4E3B;&#x8981;&#x8FD8;&#x662F;&#x5BF9;&#x6570;&#x636E;&#x3001;&#x65B9;&#x6CD5;&#x5171;&#x4EAB;&#x5206;&#x79BB;&#xFF0C;&#x5C06;&#x6570;&#x636E;&#x7684;&#x65B9;&#x6CD5;&#x5206;&#x4E3A;&#x5185;&#x90E8;&#x6570;&#x636E;&#x3001;&#x5185;&#x90E8;&#x65B9;&#x6CD5;&#x548C;&#x5916;&#x90E8;&#x6570;&#x636E;&#x3001;&#x5916;&#x90E8;&#x65B9;&#x6CD5;&#x3002;</li>
<li>&#x5185;&#x90E8;&#x72B6;&#x6001;&#x4FDD;&#x5B58;&#x5728;&#x5BF9;&#x8C61;&#x5185;&#x90E8;&#xFF0C;&#x901A;&#x5E38;&#x4E0D;&#x4F1A;&#x6539;&#x53D8;&#xFF0C;&#x53EF;&#x4EE5;&#x5171;&#x4EAB;</li>
<li>&#x5916;&#x90E8;&#x72B6;&#x6001;&#x4FDD;&#x5B58;&#x5728;&#x5BF9;&#x8C61;&#x5916;&#x90E8;&#xFF0C;&#x53EF;&#x4EE5;&#x968F;&#x573A;&#x666F;&#x6539;&#x53D8;&#xFF0C;&#x4E0D;&#x53EF;&#x4EE5;&#x5171;&#x4EAB;&#x3002;</li>
</ul>
<h3 id="t16218.1 &#x7C7B;&#x56FE;">18.1 &#x7C7B;&#x56FE; <a href="#t16218.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_f42650d7_1720749.jpeg" alt="flyweight"></p>
<h3 id="t16318.2 &#x4EE3;&#x7801;">18.2 &#x4EE3;&#x7801; <a href="#t16318.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Person</span>(<span class="hljs-params">name,age</span>) </span>{
    <span class="hljs-keyword">this</span>.name=name;
    <span class="hljs-keyword">this</span>.age=age;
}
Person.prototype.getAge=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.age)
}
Person.prototype.getName=<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.name)
}
</code></pre>
<h3 id="t16418.3 &#x573A;&#x666F;">18.3 &#x573A;&#x666F; <a href="#t16418.3 &#x573A;&#x666F;"> # </a></h3>
<h4 id="t16518.3.1 &#x5BF9;&#x8C61;">18.3.1 &#x5BF9;&#x8C61; <a href="#t16518.3.1 &#x5BF9;&#x8C61;"> # </a></h4>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;red&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;color&quot;</span> <span class="hljs-attr">checked</span>/&gt;</span>&#x7EA2; 
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;yellow&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;color&quot;</span>/&gt;</span>&#x9EC4; 
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;blue&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;color&quot;</span>/&gt;</span>&#x84DD;

<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;draw()&quot;</span>&gt;</span>&#x7ED8;&#x5236;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">let</span> container = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;container&apos;</span>);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyDiv</span></span>{
    <span class="hljs-keyword">constructor</span>(){
      <span class="hljs-keyword">this</span>.element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;div&apos;</span>);
    }
    setColor(color){
        <span class="hljs-keyword">this</span>.element.style = <span class="hljs-string">`width:100px;height:100px;background-color:<span class="hljs-subst">${color}</span>`</span>; 
    }
}
<span class="hljs-keyword">let</span> div = <span class="hljs-keyword">new</span> MyDiv();
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">draw</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">let</span> color = <span class="hljs-built_in">Array</span>.from(<span class="hljs-built_in">document</span>.getElementsByName(<span class="hljs-string">&apos;color&apos;</span>)).find(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.checked).value||<span class="hljs-string">&apos;red&apos;</span>;
  div.setColor(color);
  container.appendChild(div.element);
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h4 id="t16618.3.2 &#x5206;&#x9875;">18.3.2 &#x5206;&#x9875; <a href="#t16618.3.2 &#x5206;&#x9875;"> # </a></h4>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;news&quot;</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;nextPage&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;goNext()&quot;</span>&gt;</span>&#x4E0B;&#x4E00;&#x9875;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">let</span> list = [];
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">20</span>;i++){
    list[i]=<span class="hljs-string">`&#x65B0;&#x95FB;<span class="hljs-subst">${i+<span class="hljs-number">1</span>}</span>`</span>
}
<span class="hljs-keyword">let</span> pageNum = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> pageSize = <span class="hljs-number">5</span>;
<span class="hljs-keyword">let</span> news = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;news&apos;</span>);
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;list.length;i++){
    <span class="hljs-keyword">let</span> li = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;li&apos;</span>);
    li.innerHTML = <span class="hljs-string">`&#x65B0;&#x95FB;<span class="hljs-subst">${i+<span class="hljs-number">1</span>}</span>`</span>;
    li.style.display = <span class="hljs-string">&apos;none&apos;</span>;
    news.appendChild(li);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">goNext</span>(<span class="hljs-params"></span>)</span>{
  pageNum++;
  <span class="hljs-keyword">let</span> start = (pageNum <span class="hljs-number">-1</span>)*pageSize;
  <span class="hljs-keyword">let</span> lis = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&apos;li&apos;</span>);
  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;=lis.length;i++){
     <span class="hljs-keyword">let</span> li = lis[i];
     <span class="hljs-keyword">if</span>(i&gt;=start &amp;&amp; i&lt;start+pageSize){
         li.style.display = <span class="hljs-string">&apos;block&apos;</span>;
     }<span class="hljs-keyword">else</span>{
         li.style.display = <span class="hljs-string">&apos;none&apos;</span>;
     }
  }
}
goNext();
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;news&quot;</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;nextPage&quot;</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">&quot;goNext()&quot;</span>&gt;</span>&#x4E0B;&#x4E00;&#x9875;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">let</span> list = [];
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">20</span>;i++){
    list[i]=<span class="hljs-string">`&#x65B0;&#x95FB;<span class="hljs-subst">${i+<span class="hljs-number">1</span>}</span>`</span>
}
<span class="hljs-keyword">let</span> getLi = (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">let</span> lis = [];
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">let</span> element;
        <span class="hljs-keyword">if</span>(lis.length&lt;<span class="hljs-number">5</span>){
            element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;li&apos;</span>);
            lis.push(element);
        }<span class="hljs-keyword">else</span>{
            element = lis.shift();
            lis.push(element);
        }
            <span class="hljs-keyword">return</span> element;
    }
})();

<span class="hljs-keyword">let</span> pageNum = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> pageSize = <span class="hljs-number">5</span>;
<span class="hljs-keyword">let</span> news = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;news&apos;</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">goNext</span>(<span class="hljs-params"></span>)</span>{
  pageNum++;
  <span class="hljs-keyword">let</span> start = (pageNum <span class="hljs-number">-1</span>)*pageSize;
  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">1</span>;i&lt;=<span class="hljs-number">5</span>;i++){
      <span class="hljs-keyword">let</span> element = getLi();
      element.innerHTML = <span class="hljs-string">`&#x65B0;&#x95FB;<span class="hljs-subst">${start+i}</span>`</span>;
      news.appendChild(element);
  }
}
goNext();

</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<h2 id="t16719. &#x6A21;&#x7248;&#x65B9;&#x6CD5;">19. &#x6A21;&#x7248;&#x65B9;&#x6CD5; <a href="#t16719. &#x6A21;&#x7248;&#x65B9;&#x6CD5;"> # </a></h2>
<ul>
<li>&#x6A21;&#x677F;&#x65B9;&#x6CD5;&#x6A21;&#x5F0F;&#x5728;&#x4E00;&#x4E2A;&#x65B9;&#x6CD5;&#x4E2D;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7B97;&#x6CD5;&#x7684;&#x9AA8;&#x67B6;&#xFF0C;&#x800C;&#x5C06;&#x4E00;&#x4E9B;&#x6B65;&#x9AA4;&#x7684;&#x5B9E;&#x73B0;&#x5EF6;&#x8FDF;&#x5230;&#x5B50;&#x7C7B;&#x4E2D;</li>
<li>&#x6A21;&#x677F;&#x65B9;&#x6CD5;&#x4F7F;&#x5F97;&#x5B50;&#x7C7B;&#x53EF;&#x4EE5;&#x5728;&#x4E0D;&#x6539;&#x53D8;&#x7B97;&#x6CD5;&#x7ED3;&#x6784;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x91CD;&#x65B0;&#x5B9A;&#x4E49;&#x7B97;&#x6CD5;&#x4E2D;&#x67D0;&#x4E9B;&#x6B65;&#x9AA4;&#x7684;&#x5177;&#x4F53;&#x5B9E;&#x73B0;</li>
<li>&#x4E00;&#x822C;&#x6709;&#x4E24;&#x90E8;&#x5206;&#x7EC4;&#x6210;&#xFF0C;&#x7B2C;&#x4E00;&#x90E8;&#x5206;&#x662F;&#x62BD;&#x8C61;&#x7236;&#x7C7B;&#xFF0C;&#x7B2C;&#x4E8C;&#x90E8;&#x5206;&#x662F;&#x5177;&#x4F53;&#x7684;&#x5B9E;&#x73B0;&#x5B50;&#x7C7B;</li>
<li>&#x597D;&#x83B1;&#x575E;&#x539F;&#x5219;&#xFF0C;&#x5B50;&#x7C7B;&#x653E;&#x5F03;&#x4E86;&#x63A7;&#x5236;&#x6743;&#xFF0C;&#x6539;&#x7531;&#x7236;&#x7C7B;&#x6765;&#x8C03;&#x7528;<ul>
<li>&#x53D1;&#x5E03;&#x8BA2;&#x9605;</li>
<li>&#x56DE;&#x8C03;&#x51FD;&#x6570;</li>
</ul>
</li>
</ul>
<h3 id="t16819.1 &#x7C7B;&#x56FE;">19.1 &#x7C7B;&#x56FE; <a href="#t16819.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_375f96b8_1720749.jpeg" alt="template"></p>
<h3 id="t16919.2 &#x4EE3;&#x7801;">19.2 &#x4EE3;&#x7801; <a href="#t16919.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span></span>{
    dinner() {
        <span class="hljs-keyword">this</span>.buy();
        <span class="hljs-keyword">this</span>.cook();
        <span class="hljs-keyword">this</span>.eat();
    }
    buy() {}
    cook() {}
    eat() {}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Jiangwen</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Person</span></span>{
    buy() {<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x4E70;&#x9EC4;&#x74DC;&apos;</span>);}
    cook() {<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x62CD;&#x9EC4;&#x74DC;&apos;</span>);}
    eat() {<span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;&#x5403;&#x9EC4;&#x74DC;&apos;</span>);}
}
<span class="hljs-keyword">let</span> j=<span class="hljs-keyword">new</span> Jiangwen();
j.dinner();
</code></pre>
<h3 id="t17019.3 &#x573A;&#x666F;">19.3 &#x573A;&#x666F; <a href="#t17019.3 &#x573A;&#x666F;"> # </a></h3>
<h4 id="t17119.3.1 &#x63D0;&#x793A;&#x6846;">19.3.1 &#x63D0;&#x793A;&#x6846; <a href="#t17119.3.1 &#x63D0;&#x793A;&#x6846;"> # </a></h4>
<pre><code class="lang-html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;ie=edge&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;3.css&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;3.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>    
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">let</span> dialog = <span class="hljs-keyword">new</span> ConfirmDialog({
    <span class="hljs-attr">title</span>:<span class="hljs-string">&apos;&#x6807;&#x9898;&apos;</span>,
    <span class="hljs-attr">content</span>:<span class="hljs-string">&apos;&#x5185;&#x5BB9;&apos;</span>
});
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Dialog</span></span>{
    <span class="hljs-keyword">constructor</span>(options) {
        <span class="hljs-keyword">this</span>.title = options.title||<span class="hljs-string">&apos;&#x6807;&#x9898;&apos;</span>;
        <span class="hljs-keyword">this</span>.content = options.content||<span class="hljs-string">&apos;&#x5185;&#x5BB9;&apos;</span>;
        <span class="hljs-keyword">this</span>.onConfirm = options.onConfirm||<span class="hljs-keyword">this</span>.hide;
        <span class="hljs-keyword">this</span>.onCancel = options.onCancel||<span class="hljs-keyword">this</span>.hide;
        <span class="hljs-keyword">this</span>.init();
        <span class="hljs-keyword">this</span>.initEventHandler();
    }
    init() {
        <span class="hljs-keyword">this</span>.panel=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;div&apos;</span>);
        <span class="hljs-keyword">this</span>.panel.className=<span class="hljs-string">&apos;dialog&apos;</span>;

        <span class="hljs-keyword">this</span>.titleP=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;p&apos;</span>);
        <span class="hljs-keyword">this</span>.titleP.innerHTML=<span class="hljs-keyword">this</span>.title;
        <span class="hljs-keyword">this</span>.panel.appendChild(<span class="hljs-keyword">this</span>.titleP);

        <span class="hljs-keyword">this</span>.contentP=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;p&apos;</span>);
        <span class="hljs-keyword">this</span>.contentP.innerHTML=<span class="hljs-keyword">this</span>.content;
        <span class="hljs-keyword">this</span>.panel.appendChild(<span class="hljs-keyword">this</span>.contentP);

        <span class="hljs-keyword">this</span>.confirmBtn=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;button&apos;</span>);
        <span class="hljs-keyword">this</span>.confirmBtn.className=<span class="hljs-string">&apos;button confirm-button&apos;</span>;
        <span class="hljs-keyword">this</span>.confirmBtn.innerHTML=<span class="hljs-string">&apos;&#x786E;&#x5B9A;&apos;</span>;
        <span class="hljs-keyword">this</span>.panel.appendChild(<span class="hljs-keyword">this</span>.confirmBtn);

        <span class="hljs-keyword">this</span>.cancelBtn=<span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;button&apos;</span>);
        <span class="hljs-keyword">this</span>.cancelBtn.className=<span class="hljs-string">&apos;button cancel-button&apos;</span>;
        <span class="hljs-keyword">this</span>.cancelBtn.innerHTML=<span class="hljs-string">&apos;&#x53D6;&#x6D88;&apos;</span>;
        <span class="hljs-keyword">this</span>.panel.appendChild(<span class="hljs-keyword">this</span>.cancelBtn);

        <span class="hljs-built_in">document</span>.body.appendChild(<span class="hljs-keyword">this</span>.panel);
    }
    inithttp:<span class="hljs-comment">//image.bubuko.com/info/201807/20180712173511381297.pngntListener(&apos;click&apos;,() =&gt; {</span>
            <span class="hljs-keyword">this</span>.onConfirm();
            <span class="hljs-keyword">this</span>.hide();
        });
        <span class="hljs-keyword">this</span>.cancelBtn.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,() =&gt; {
            <span class="hljs-keyword">this</span>.onCancel();
            <span class="hljs-keyword">this</span>.hide();
        });
    }
    show() {
        <span class="hljs-keyword">this</span>.panel.style.display=<span class="hljs-string">&apos;block&apos;</span>;
    }
    hide() {
        <span class="hljs-keyword">this</span>.panel.style.display=<span class="hljs-string">&apos;none&apos;</span>;
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ContentDialog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Dialog</span></span>{
    init() {
        <span class="hljs-keyword">super</span>.init();
        <span class="hljs-keyword">this</span>.titleP.parentNode.removeChild(<span class="hljs-keyword">this</span>.titleP);
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ConfirmDialog</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Dialog</span></span>{
    init() {
        <span class="hljs-keyword">super</span>.init();
        <span class="hljs-keyword">this</span>.cancelBtn.parentNode.removeChild(<span class="hljs-keyword">this</span>.cancelBtn);
    }
}
</code></pre>
<pre><code class="lang-css"><span class="hljs-selector-class">.dialog</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">400px</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">300px</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">padding</span>:<span class="hljs-number">20px</span>;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">50%</span>;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">50%</span>;
    <span class="hljs-attribute">margin-left</span>:-<span class="hljs-number">200px</span>;
    <span class="hljs-attribute">margin-top</span>:-<span class="hljs-number">150px</span>;
    <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid<span class="hljs-number">#000</span>;
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#EEE</span>;
    <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
    <span class="hljs-attribute">display</span>: flex;
    <span class="hljs-attribute">flex-direction</span>: column;
    <span class="hljs-attribute">align-items</span>: center;
    <span class="hljs-attribute">justify-content</span>: center;
}

<span class="hljs-selector-class">.dialog</span> <span class="hljs-selector-tag">button</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100px</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">30px</span>;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">border</span>: none;
    <span class="hljs-attribute">outline</span>: none;

}
<span class="hljs-selector-class">.dialog</span> <span class="hljs-selector-class">.confirm-button</span> {
    <span class="hljs-attribute">right</span>:<span class="hljs-number">140px</span>;
    <span class="hljs-attribute">bottom</span>:<span class="hljs-number">20px</span>;
}
<span class="hljs-selector-class">.dialog</span> <span class="hljs-selector-class">.cancel-button</span> {
    <span class="hljs-attribute">right</span>:<span class="hljs-number">20px</span>;
    <span class="hljs-attribute">bottom</span>:<span class="hljs-number">20px</span>;
}
</code></pre>
<h4 id="t17219.3.2">19.3.2 <a href="#t17219.3.2"> # </a></h4>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192800_bdf6372b_1720749.png" alt="react-lifecycle"></p>
<h2 id="t17320. &#x804C;&#x8D23;&#x94FE;&#x6A21;&#x5F0F;">20. &#x804C;&#x8D23;&#x94FE;&#x6A21;&#x5F0F; <a href="#t17320. &#x804C;&#x8D23;&#x94FE;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x4E00;&#x6B65;&#x64CD;&#x4F5C;&#x53EF;&#x80FD;&#x5206;&#x4E3A;&#x591A;&#x4E2A;&#x804C;&#x8D23;&#x89D2;&#x8272;&#x6765;&#x5B8C;&#x6210;</li>
<li>&#x628A;&#x8FD9;&#x4E9B;&#x89D2;&#x8272;&#x90FD;&#x5206;&#x5F00;&#xFF0C;&#x7136;&#x540E;&#x7528;&#x4E00;&#x4E2A;&#x94FE;&#x4E32;&#x8D77;&#x6765;</li>
<li>&#x5C06;&#x53D1;&#x8D77;&#x8005;&#x548C;&#x5404;&#x4E2A;&#x5904;&#x7406;&#x8005;&#x8FDB;&#x884C;&#x9694;&#x79BB;</li>
</ul>
<h3 id="t17420.1 &#x7C7B;&#x56FE;">20.1 &#x7C7B;&#x56FE; <a href="#t17420.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_0dc3a8f6_1720749.jpeg" alt="responsibility"></p>
<h3 id="t17520.2 &#x4EE3;&#x7801;">20.2 &#x4EE3;&#x7801; <a href="#t17520.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Employee</span></span>{
    <span class="hljs-keyword">constructor</span>(next) {
        <span class="hljs-keyword">this</span>.next=next;
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">GroupLeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Employee</span></span>{
    audit() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x7EC4;&#x957F;&#x5DF2;&#x7ECF;&#x5BA1;&#x6279;!`</span>);
        <span class="hljs-keyword">this</span>.next&amp;&amp;<span class="hljs-keyword">this</span>.next.audit();
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Manager</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Employee</span></span>{
    audit() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x7ECF;&#x7406;&#x5DF2;&#x7ECF;&#x5BA1;&#x6279;!`</span>);
        <span class="hljs-keyword">this</span>.next&amp;&amp;<span class="hljs-keyword">this</span>.next.audit();
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Boss</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Employee</span></span>{
    audit() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x8001;&#x677F;&#x5DF2;&#x7ECF;&#x5BA1;&#x6279;!`</span>);
        <span class="hljs-keyword">this</span>.next&amp;&amp;<span class="hljs-keyword">this</span>.next.audit();
    }
}
<span class="hljs-keyword">let</span> boss=<span class="hljs-keyword">new</span> Boss();
<span class="hljs-keyword">let</span> manager=<span class="hljs-keyword">new</span> Manager(boss);
<span class="hljs-keyword">let</span> groupLeader=<span class="hljs-keyword">new</span> GroupLeader(manager);
groupLeader.audit();

</code></pre>
<h2 id="t17621. &#x5907;&#x5FD8;&#x5F55;&#x6A21;&#x5F0F;">21. &#x5907;&#x5FD8;&#x5F55;&#x6A21;&#x5F0F; <a href="#t17621. &#x5907;&#x5FD8;&#x5F55;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x8BB0;&#x5F55;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x7684;&#x53D8;&#x5316;</li>
<li>&#x53EF;&#x4EE5;&#x6062;&#x590D;&#x4E4B;&#x524D;&#x7684;&#x67D0;&#x4E2A;&#x72B6;&#x6001;</li>
</ul>
<h3 id="t17721.1 &#x7C7B;&#x56FE;">21.1 &#x7C7B;&#x56FE; <a href="#t17721.1 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_153a110d_1720749.jpeg" alt="memos"></p>
<h3 id="t17821.2 &#x4EE3;&#x7801;">21.2 &#x4EE3;&#x7801; <a href="#t17821.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-html">    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;save-btn&quot;</span>&gt;</span>&#x4FDD;&#x5B58;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;prev-btn&quot;</span>&gt;</span>&#x4E0A;&#x4E00;&#x6B65;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;next-btn&quot;</span>&gt;</span>&#x4E0B;&#x4E00;&#x6B65;<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
      <span class="hljs-keyword">let</span> content = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;content&apos;</span>);
      <span class="hljs-keyword">let</span> saveBtn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;save-btn&apos;</span>);
      <span class="hljs-keyword">let</span> prevBtn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;prev-btn&apos;</span>);
      <span class="hljs-keyword">let</span> nextBtn = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;next-btn&apos;</span>);
      <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Memo</span></span>{
          <span class="hljs-keyword">constructor</span>(content){
              <span class="hljs-keyword">this</span>.content = content;
          }
      }
      <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Memos</span> </span>{
          <span class="hljs-keyword">constructor</span>(){
              <span class="hljs-keyword">this</span>.index = <span class="hljs-number">0</span>;
              <span class="hljs-keyword">this</span>.list = [<span class="hljs-keyword">new</span> Memo(<span class="hljs-string">&apos;&apos;</span>)];
          }
          add(content){
              <span class="hljs-keyword">this</span>.list[++<span class="hljs-keyword">this</span>.index] = <span class="hljs-keyword">new</span> Memo(content);
          }
          get(){
              <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.list[<span class="hljs-keyword">this</span>.index];
          }
          prev(){
              <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.index ==<span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> alert(<span class="hljs-string">&apos;&#x6CA1;&#x6709;&#x4E0A;&#x4E00;&#x6B65;&apos;</span>);
              <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.list[--<span class="hljs-keyword">this</span>.index];
          }
          next(){
               <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.index ==<span class="hljs-keyword">this</span>.list.length<span class="hljs-number">-1</span>) <span class="hljs-keyword">return</span> alert(<span class="hljs-string">&apos;&#x6CA1;&#x6709;&#x4E0B;&#x4E00;&#x6B65;&apos;</span>);
              <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.list[++<span class="hljs-keyword">this</span>.index];
          }
      }
      <span class="hljs-keyword">let</span> memos = <span class="hljs-keyword">new</span> Memos();
      saveBtn.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          memos.add(content.value);
      });
      prevBtn.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">let</span> memo = memos.prev();
          content.value = memo.content;
      });
      nextBtn.addEventListener(<span class="hljs-string">&apos;click&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
          <span class="hljs-keyword">let</span> memo = memos.next();
          content.value = memo.content;
      });
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h2 id="t17922. &#x4E2D;&#x4ECB;&#x8005;&#x6A21;&#x5F0F;">22. &#x4E2D;&#x4ECB;&#x8005;&#x6A21;&#x5F0F; <a href="#t17922. &#x4E2D;&#x4ECB;&#x8005;&#x6A21;&#x5F0F;"> # </a></h2>
<h3 id="t18022.1 &#x7C7B;&#x5E93;">22.1 &#x7C7B;&#x5E93; <a href="#t18022.1 &#x7C7B;&#x5E93;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_bb120e34_1720749.jpeg" alt="mediator"></p>
<h3 id="t18122.2 &#x4EE3;&#x7801;">22.2 &#x4EE3;&#x7801; <a href="#t18122.2 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Boy</span></span>{
    <span class="hljs-keyword">constructor</span>(mediator) {
        <span class="hljs-keyword">this</span>.mediator=mediator;
        <span class="hljs-keyword">this</span>.salary=<span class="hljs-number">1000</span>;
    }
    learnGirl() {
        <span class="hljs-keyword">this</span>.mediator.learnGirl();
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Girl</span></span>{
    <span class="hljs-keyword">constructor</span>(mediator) {
        <span class="hljs-keyword">this</span>.mediator=mediator;
        <span class="hljs-keyword">this</span>.age=<span class="hljs-number">28</span>;
    }
    learnBoy() {
        <span class="hljs-keyword">this</span>.mediator.learnBoy();
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Mediator</span></span>{
    <span class="hljs-keyword">constructor</span>(boy,girl) {
        <span class="hljs-keyword">this</span>.boy=boy;
        <span class="hljs-keyword">this</span>.girl=girl;
    }
    learnBoy() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x8FD9;&#x4E2A;&#x7537;&#x5B69;&#x6708;&#x85AA;<span class="hljs-subst">${<span class="hljs-keyword">this</span>.boy.salary*<span class="hljs-number">10</span>}</span>`</span>);
    }
    learnGirl() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`&#x8FD9;&#x4E2A;&#x5973;&#x5B69;&#x5E74;&#x9F84;<span class="hljs-subst">${<span class="hljs-keyword">this</span>.girl.age<span class="hljs-number">-10</span>}</span>`</span>);
    }
}
<span class="hljs-keyword">let</span> boy=<span class="hljs-keyword">new</span> Boy();
<span class="hljs-keyword">let</span> girl=<span class="hljs-keyword">new</span> Girl();
<span class="hljs-keyword">let</span> mediator=<span class="hljs-keyword">new</span> Mediator(boy,girl);
boy.mediator=mediator;
girl.mediator=mediator;
boy.learnGirl();
girl.learnBoy();
</code></pre>
<h2 id="t18223. &#x8BBF;&#x95EE;&#x8005;&#x6A21;&#x5F0F;">23. &#x8BBF;&#x95EE;&#x8005;&#x6A21;&#x5F0F; <a href="#t18223. &#x8BBF;&#x95EE;&#x8005;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x5C06;&#x6570;&#x636E;&#x64CD;&#x4F5C;&#x548C;&#x6570;&#x636E;&#x7ED3;&#x6784;&#x8FDB;&#x884C;&#x5206;&#x79BB;</li>
<li>&#x6709;&#x8FD9;&#x4E48;&#x4E00;&#x4E2A;&#x64CD;&#x4F5C;&#xFF0C;&#x5B83;&#x662F;&#x4F5C;&#x7528;&#x4E8E;&#x4E00;&#x4E9B;&#x5143;&#x7D20;&#x4E4B;&#x4E0A;&#x7684;&#xFF0C;&#x800C;&#x8FD9;&#x4E9B;&#x5143;&#x7D20;&#x5C5E;&#x4E8E;&#x67D0;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x7ED3;&#x6784;&#x3002;</li>
<li>&#x540C;&#x65F6;&#x8FD9;&#x4E2A;&#x64CD;&#x4F5C;&#x662F;&#x5728;&#x4E0D;&#x6539;&#x53D8;&#x5404;&#x5143;&#x7D20;&#x7C7B;&#x7684;&#x524D;&#x63D0;&#x4E0B;&#xFF0C;&#x5728;&#x8FD9;&#x4E2A;&#x524D;&#x63D0;&#x4E0B;&#x5B9A;&#x4E49;&#x65B0;&#x64CD;&#x4F5C;&#x662F;&#x8BBF;&#x95EE;&#x8005;&#x6A21;&#x5F0F;&#x7CBE;&#x9AD3;&#x4E2D;&#x7684;&#x7CBE;&#x9AD3;&#x3002;</li>
</ul>
<h3 id="t18323.1 &#x7EC4;&#x6210;&#x90E8;&#x5206;">23.1 &#x7EC4;&#x6210;&#x90E8;&#x5206; <a href="#t18323.1 &#x7EC4;&#x6210;&#x90E8;&#x5206;"> # </a></h3>
<ul>
<li>ObjectStructure&#xFF1A;&#x5B9A;&#x4E49;&#x5F53;&#x4E2D;&#x6240;&#x8BF4;&#x7684;&#x5BF9;&#x8C61;&#x7ED3;&#x6784;&#xFF0C;&#x5BF9;&#x8C61;&#x7ED3;&#x6784;&#x662F;&#x4E00;&#x4E2A;&#x62BD;&#x8C61;&#x8868;&#x8FF0;&#xFF0C;&#x5B83;&#x5185;&#x90E8;&#x7BA1;&#x7406;&#x4E86;&#x5143;&#x7D20;&#x96C6;&#x5408;&#xFF0C;&#x5E76;&#x4E14;&#x53EF;&#x4EE5;&#x8FED;&#x4EE3;&#x8FD9;&#x4E9B;&#x5143;&#x7D20;&#x4F9B;&#x8BBF;&#x95EE;&#x8005;&#x8BBF;&#x95EE;&#x3002;</li>
<li>Element&#xFF1A;&#x5143;&#x7D20;&#x63A5;&#x53E3;&#x6216;&#x8005;&#x62BD;&#x8C61;&#x7C7B;&#xFF0C;&#x5B83;&#x5B9A;&#x4E49;&#x4E86;&#x4E00;&#x4E2A;&#x63A5;&#x53D7;&#x8BBF;&#x95EE;&#x8005;&#x7684;&#x65B9;&#x6CD5;&#xFF08;Accept&#xFF09;&#xFF0C;&#x5176;&#x610F;&#x4E49;&#x662F;&#x6307;&#x6BCF;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x90FD;&#x8981;&#x53EF;&#x4EE5;&#x88AB;&#x8BBF;&#x95EE;&#x8005;&#x8BBF;&#x95EE;&#x3002;</li>
<li>ConcreteElementA&#x3001;ConcreteElementB&#xFF1A;&#x5177;&#x4F53;&#x7684;&#x5143;&#x7D20;&#x7C7B;&#xFF0C;&#x5B83;&#x63D0;&#x4F9B;&#x63A5;&#x53D7;&#x8BBF;&#x95EE;&#x65B9;&#x6CD5;&#x7684;&#x5177;&#x4F53;&#x5B9E;&#x73B0;&#xFF0C;&#x800C;&#x8FD9;&#x4E2A;&#x5177;&#x4F53;&#x7684;&#x5B9E;&#x73B0;&#xFF0C;&#x901A;&#x5E38;&#x60C5;&#x51B5;&#x4E0B;&#x662F;&#x4F7F;&#x7528;&#x8BBF;&#x95EE;&#x8005;&#x63D0;&#x4F9B;&#x7684;&#x8BBF;&#x95EE;&#x8BE5;&#x5143;&#x7D20;&#x7C7B;&#x7684;&#x65B9;&#x6CD5;&#x3002;</li>
<li>Visitor&#xFF1A;&#x63A5;&#x53E3;&#x6216;&#x8005;&#x62BD;&#x8C61;&#x7C7B;&#xFF0C;&#x5B83;&#x5B9A;&#x4E49;&#x4E86;&#x5BF9;&#x6BCF;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#xFF08;Element&#xFF09;&#x8BBF;&#x95EE;&#x7684;&#x884C;&#x4E3A;&#xFF0C;&#x5B83;&#x7684;&#x53C2;&#x6570;&#x5C31;&#x662F;&#x53EF;&#x4EE5;&#x8BBF;&#x95EE;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x5B83;&#x7684;&#x65B9;&#x6CD5;&#x6570;&#x7406;&#x8BBA;&#x4E0A;&#x6765;&#x8BB2;&#x4E0E;&#x5143;&#x7D20;&#x4E2A;&#x6570;&#x662F;&#x4E00;&#x6837;&#x7684;&#xFF0C;&#x56E0;&#x6B64;&#xFF0C;&#x8BBF;&#x95EE;&#x8005;&#x6A21;&#x5F0F;&#x8981;&#x6C42;&#x5143;&#x7D20;&#x7684;&#x7C7B;&#x65CF;&#x8981;&#x7A33;&#x5B9A;&#xFF0C;&#x5982;&#x679C;&#x7ECF;&#x5E38;&#x6DFB;&#x52A0;&#x3001;&#x79FB;&#x9664;&#x5143;&#x7D20;&#x7C7B;&#xFF0C;&#x5FC5;&#x7136;&#x4F1A;&#x5BFC;&#x81F4;&#x9891;&#x7E41;&#x5730;&#x4FEE;&#x6539;Visitor&#x63A5;&#x53E3;&#xFF0C;&#x5982;&#x679C;&#x8FD9;&#x6837;&#x5219;&#x4E0D;&#x9002;&#x5408;&#x4F7F;&#x7528;&#x8BBF;&#x95EE;&#x8005;&#x6A21;&#x5F0F;&#x3002;</li>
</ul>
<h3 id="t18423.2 &#x7C7B;&#x56FE;">23.2 &#x7C7B;&#x56FE; <a href="#t18423.2 &#x7C7B;&#x56FE;"> # </a></h3>
<p><img src="https://images.gitee.com/uploads/images/2019/0109/192759_6d3a62a9_1720749.jpeg" alt="visitor"></p>
<h3 id="t18523.3 &#x4EE3;&#x7801;">23.3 &#x4EE3;&#x7801; <a href="#t18523.3 &#x4EE3;&#x7801;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Father</span></span>{
    <span class="hljs-keyword">constructor</span>(name,wealth) {
        <span class="hljs-keyword">this</span>.name=name;
        <span class="hljs-keyword">this</span>.wealth=wealth;
    }
    accept(viewer) {
        viewer.viewFather(<span class="hljs-keyword">this</span>);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Mother</span></span>{
    <span class="hljs-keyword">constructor</span>(name,character) {
        <span class="hljs-keyword">this</span>.name=name;
        <span class="hljs-keyword">this</span>.character=character;
    }
    accept(viewer) {
        viewer.viewMother(<span class="hljs-keyword">this</span>);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Son</span></span>{
    <span class="hljs-keyword">constructor</span>(name,look) {
        <span class="hljs-keyword">this</span>.name=name;
        <span class="hljs-keyword">this</span>.look=look;
    }
    accept(viewer) {
        viewer.viewSon(<span class="hljs-keyword">this</span>);
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Family</span></span>{
    <span class="hljs-keyword">constructor</span>(father,mother,son) {
        <span class="hljs-keyword">this</span>.father=father;
        <span class="hljs-keyword">this</span>.mother=mother
        <span class="hljs-keyword">this</span>.son=son;
    }
    view(viewer) {
        <span class="hljs-keyword">this</span>.father.accept(viewer);
        <span class="hljs-keyword">this</span>.mother.accept(viewer);
        <span class="hljs-keyword">this</span>.son.accept(viewer);
    }
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Girl</span></span>{
    <span class="hljs-keyword">constructor</span>(name) {
        <span class="hljs-keyword">this</span>.name=name;
    }
    viewFather(father) {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span> <span class="hljs-subst">${father.name}</span> &#x7684;&#x8D22;&#x5BCC; <span class="hljs-subst">${father.wealth}</span>`</span>);        
    }
    viewMother(mother) {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span> <span class="hljs-subst">${mother.name}</span> &#x7684;&#x6027;&#x683C; <span class="hljs-subst">${mother.character}</span>`</span>);        
    }
    viewSon(son) {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.name}</span> <span class="hljs-subst">${son.name}</span> &#x7684;&#x76F8;&#x8C8C; <span class="hljs-subst">${son.look}</span>`</span>);        
    }
}
<span class="hljs-keyword">let</span> father=<span class="hljs-keyword">new</span> Father(<span class="hljs-string">&apos;&#x51AF;&#x7238;&#x7238;&apos;</span>,<span class="hljs-number">999999</span>);
<span class="hljs-keyword">let</span> mother=<span class="hljs-keyword">new</span> Mother(<span class="hljs-string">&apos;&#x51AF;&#x5988;&#x5988;&apos;</span>,<span class="hljs-string">&apos;&#x6E29;&#x67D4;&apos;</span>);
<span class="hljs-keyword">let</span> son=<span class="hljs-keyword">new</span> Son(<span class="hljs-string">&apos;&#x51AF;&#x7ECD;&#x5CF0;&apos;</span>,<span class="hljs-string">&apos;&#x5E05;&apos;</span>);
<span class="hljs-keyword">let</span> family=<span class="hljs-keyword">new</span> Family(father,mother,son);
<span class="hljs-keyword">let</span> zhaoliying=<span class="hljs-keyword">new</span> Girl(<span class="hljs-string">&apos;&#x8D75;&#x4E3D;&#x9896;&apos;</span>);
family.view(zhaoliying);
</code></pre>
<h3 id="t18623.3 &#x5E94;&#x7528;&#x573A;&#x666F;">23.3 &#x5E94;&#x7528;&#x573A;&#x666F; <a href="#t18623.3 &#x5E94;&#x7528;&#x573A;&#x666F;"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> babel = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;babel-core&apos;</span>);
<span class="hljs-keyword">let</span> t=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;babel-types&apos;</span>);
<span class="hljs-keyword">let</span> preCalculator={
    <span class="hljs-attr">visitor</span>: {
        BinaryExpression(path) {
            <span class="hljs-keyword">let</span> node=path.node;
            <span class="hljs-built_in">console</span>.log(node.operator);
        }
    }
}


<span class="hljs-keyword">const</span> result = babel.transform(<span class="hljs-string">&apos;const sum = 1+2&apos;</span>,{
    <span class="hljs-attr">plugins</span>:[
        preCalculator
    ]
});
<span class="hljs-comment">//console.log(result.code);</span>
</code></pre>
<h2 id="t18724. &#x89E3;&#x91CA;&#x5668;&#x6A21;&#x5F0F;">24. &#x89E3;&#x91CA;&#x5668;&#x6A21;&#x5F0F; <a href="#t18724. &#x89E3;&#x91CA;&#x5668;&#x6A21;&#x5F0F;"> # </a></h2>
<ul>
<li>&#x63CF;&#x8FF0;&#x8BED;&#x8A00;&#x8BED;&#x6CD5;&#x5982;&#x4F55;&#x5B9A;&#x4E49;&#xFF0C;&#x5982;&#x4F55;&#x89E3;&#x91CA;&#x548C;&#x7F16;&#x8BD1;</li>
<li><a href="https://www.cnblogs.com/chenssy/p/3346427.html">&#x89E3;&#x91CA;&#x5668;&#x6A21;&#x5F0F;</a><h3 id="t18824.1 &#x7C7B;&#x56FE;">24.1 &#x7C7B;&#x56FE; <a href="#t18824.1 &#x7C7B;&#x56FE;"> # </a></h3>
</li>
</ul>
<h3 id="t18924.2 &#x4EE3;&#x7801;">24.2 &#x4EE3;&#x7801; <a href="#t18924.2 &#x4EE3;&#x7801;"> # </a></h3>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
